[Angular] Provide Feedback to Progress Events with Angular’s HttpRequest Object
In some cases your application might need to upload large amounts of data, such as files. Obviously for a good UX we should provide the user some feedback on the progress of the upload. Angular’s HttpRequest
object has a property reportProgress
which allows us to do exactly that. Let’s see how.
// service: import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { HttpClient, HttpRequest, HttpEvent } from '@angular/common/http'; export interface Person { name: string; } @Injectable() export class PeopleService { constructor(private http: HttpClient) {} uploadAvatar(data): Observable<HttpEvent<Object>> { const req = new HttpRequest( 'POST', 'https://reqres.in/api/users/1', data, { reportProgress: true } ); return this.http.request(req); } }
// Component import { HttpClient, HttpRequest, HttpEvent, HttpEventType } from '@angular/common/http'; uploadAvatar(fileUpload) { const formData = new FormData(); formData.append('avatar', fileUpload.files[0], 'avatar.jpg'); this.peopleService .uploadAvatar(formData) .subscribe(res => { if (res.type === HttpEventType.UploadProgress) { const percentage = Math.round(100 * res.loaded / res.total); this.output = `File is ${percentage}% uploaded`; } else if (res instanceof HttpResponse) { this.output = `File is completely uploaded`; } }); }