CODEWITHSUNDEEP
angularuser-interfaceangular5
Ashwin Jiwane
Ashwin Jiwane

Reputation: 46

File download progress in the browser: Angular 5

I'm creating an application that consumes a REST api for downloading a file. The api returns the file right when you hit it. So I'm using the following logic to get the file:

downloadFile(file) {
  this.service.downloadFile(file.id).subscribe((fileData) => {
  const a = document.createElement('a');
  document.body.appendChild(a);
  const blob = new Blob([data], { type: data.type });
  const url = window.URL.createObjectURL(blob);
  a.href = url;
  a.download = file.name;
  a.click();
  window.URL.revokeObjectURL(url);
  });
}

The above code works perfectly. BUT, it downloads the file in the browser when the whole file is downloaded, i.e., you wont see the progress of file download in the browser (how we usually see when we download a file usually in Chrome). You can see its downloading the file in the 'network' tab of the console, but only shows up when the whole file is downloaded. Can anybody give any idea how can I force it to download in the browser so that it shows the progress?

Upvotes: 3

Views: 2589

Answers (1)

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9764

To achieve this solution, we need Total File Size value from the API. Also you need to use HTTPClientModule which has support for progress bar events.

Upvotes: 2

Related Questions