How can I detect the download of a file in angular?

Question

I work on angular 7, I create in my .Net Core API a controller which when it is used it will send a file to the user and he can download this file.

In my angular application I want to know if it's possible to detect the different event link to the download of the file.

I see this on developper mozilla :

function handleChanged(delta) {
  if (delta.state && delta.state.current === "complete") {
    console.log(`Download ${delta.id} has completed.`);
  }
}

browser.downloads.onChanged.addListener(handleChanged);

I try to do this in my angular application but I have an error message with this line of the code :

browser.downloads.onChanged.addListener(handleChanged);

Thank you for your help.

edit :

my download service :

  generatePDF(elt){
    return this.http.post(`${this.config.catchApiUrl()}PDF`,elt,{responseType : 'blob', reportProgress:true}
    );
  }

my download service caller :

  onFormSubmit() {
    this.generateService.eltToGeneratePDF(1).subscribe(
      r => {
        this.generateService.generatePDF(r)
        .subscribe(
          r => {
            console.log("yeah")
            saveAs(r)},
          err => console.log(err)
        )
      }      
    )
 }

Maybe this link could help you https://stackoverflow.com/a/47034525/9941039 — PierreD, Jan 28 '19 at 10:28
the error is : ./node_modules/saucelabs/index.js Module not found: Error: Can't resolve './lib-cov/SauceLabs' in 'C:\Users\Soleyne.Nero\Desktop\Project\intranetApplication\node_modules\saucelabs' — user10863293, Jan 28 '19 at 14:31
thank you I will see when I will debug the download in my angular application — user10863293, Jan 28 '19 at 14:32
@MsuArven Hi, I edit my code with my download service I try your code but it's doesn't work with the saveAs (the saveAs allow user to download file) — user10863293, Jan 30 '19 at 11:57

score 0 · Answer 1 · answered Jan 28 '19 at 10:42

User clicks a link that should start downloading of a file.
JS-client (angular) sends AJAX request to the server.
Server generates downloadId, puts into client session (at server side) {downloadInfo: {downloadId: 123, status: ID_REQUESTED}} and responds with downloadId.
JS-client generates downloadUrl by downloadId, and opens it in the new window/tab so that browser can start downloading.

5 & 6 concurrently:

5.1. JS-client notifies user with some sort of info message 'Save file somewhere'.

5.2. JS-client sends AJAX request to the server 'GET /download/status/?waitForCompletion=yes&timeout=10000'.

5.3. Server looks into user session for downloadId, retrieves its status, and returns status to the server. If waitForCompletion=yes then server waits for download to complete but not more than timeout milliseconds.

6.1. User presses save file, browser sends request to download url ('GET /download/data/')

6.2. Server modifies downloadInfo in the user session '{downloadInfo: {status:IN_PROGRESS}' and starts downloading

6.3. When download is complete server changes downloadInfo to '{status: COMPLETED}'

5.4. JS-client in response to 'GET /download/status/ retrieves status 'COMPLETED'

Above version is for single downloading, new downloading will override downloadInfo and server-side-session is not polluted with staled downloads. If the application should allow multiple concurrent files downloading (and need to know status of everyone) then delete downloadId statuses by timeout :

keep lastAccessTime: 'downloadInfo: { downloadId123: {status: ID_REQUESTED, lastAcccessTime: 123456789123456789}, downlaodId124: {...}}'
at some point delete stale items, e.g. when server accesses downloadInfo for a user.

How can I detect the download of a file in angular?

1 Answers1