How to use reportProgress in HttpClient in Angular?

angular httpclient angular7
karthik thurairaja picture karthik thurairaja · Feb 27, 2019 · Viewed 15.1k times · Source

I am downloading file using HTTP POST method. I want to call another method to show download progress to end user until file download complete. How to use reportProgress in HttpClient for this. 

  downfile(file: any): Observable<any> {

    return this.http.post(this.url , app, {
      responseType: "blob", reportProgress: true, headers: new HttpHeaders(
        { 'Content-Type': 'application/json' },
      )
    });
  }

Answer

Sudarshana Dayananda picture Sudarshana Dayananda · Feb 27, 2019

You need to use reportProgress: true to show some progress of any HTTP request. If you want to see all events, including the progress of transfers you need to use observe: 'events' option as well and return an Observable of type HttpEvent. Then you can catch all the events(DownloadProgress, Response..etc) in the component method. Find more details in Angular Official Documentation.

  downfile(file: any): Observable<HttpEvent<any>>{

    return this.http.post(this.url , app, {
      responseType: "blob", reportProgress: true, observe: "events", headers: new HttpHeaders(
        { 'Content-Type': 'application/json' },
      )
    });
  }

Then in component you can catch all the events as below.

this.myService.downfile(file)
    .subscribe(event => {

        if (event.type === HttpEventType.DownloadProgress) {
            console.log("download progress");
        }
        if (event.type === HttpEventType.Response) {
            console.log("donwload completed");
        }
});

Find HttpEventTypes Here.

Related questions

Angular 4: "Http failure response for (unknown URL): 0 Unknown Error"

I am trying to consume an API URL. I am calling the API with the below code. import {HttpClient, HttpClientModule, HttpParams} from "@angular/common/http"; @Injectable() export class PropertyPrefService { constructor(private http: HttpClient, private configurationService:Configuration) {} public searchProjects(propFilter:string):…

Read More
How to pass URLSearchParams in the HttpClient "get" method - Angular 5

I used Angular 4.2 with the Http service and I used the get method like this where params is a URLSearchParams object: this.http.get(url, {headers: this.setHeaders(), search: params}) I want to migrate to Angular 5. http is now a …

Read More
Error: No provider for HttpHandler in angular2

I am trying to implement HttpCache through interceptor. Following is the caching-interceptor.service.ts import { HttpRequest, HttpResponse, HttpInterceptor, HttpHandler, HttpEvent } from '@angular/common/http' import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/…

Read More