How to use angular2 http API for tracking upload/download progress

Question

Tho there are many adhoc libraries supporting upload/download progress in angular2, I do not know how to do use native angular2 http api to show progress while doing upload/download.

The reason why I want to use native http api is because I want to utilise

1. http interceptors(http API wrappers) around native http api that validate, cache & enrich the actual http request being sent such as this & this
2. Besides angular's http api is much more robust than any adhoc APIs

There is this nice article about how to do upload/download using angular's http api

But the article mentions that there is no native way to support progress.

Did anyone try using http api for showing progress?

If not, do you know an issue in the angular repo for this?

Answer 1

As of Angular 4.3.x and beyond versions, it can be achieved using the new HttpClient from @angular/common/http.

Read the Listening to progress events section.

Simple upload example (copied from the section mentioned above):

const req = new HttpRequest('POST', '/upload/file', file, {
  reportProgress: true,
});

http.request(req).subscribe(event => {
  // Via this API, you get access to the raw event stream.
  // Look for upload progress events.
  if (event.type === HttpEventType.UploadProgress) {
    // This is an upload progress event. Compute and show the % done:
    const percentDone = Math.round(100 * event.loaded / event.total);
    console.log(`File is ${percentDone}% uploaded.`);
  } else if (event instanceof HttpResponse) {
    console.log('File is completely uploaded!');
  }
});

And for downloading, it might be something like pretty much the same:

const req = new HttpRequest('GET', '/download/file', {
  reportProgress: true,
});

http.request(req).subscribe(event => {
  // Via this API, you get access to the raw event stream.
  // Look for download progress events.
  if (event.type === HttpEventType.DownloadProgress) {
    // This is an download progress event. Compute and show the % done:
    const percentDone = Math.round(100 * event.loaded / event.total);
    console.log(`File is ${percentDone}% downloaded.`);
  } else if (event instanceof HttpResponse) {
    console.log('File is completely downloaded!');
  }
});

Remember in case that you're monitoring a download, the Content-Length has to be set, otherwise, there's no way to the request to be measured.