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
     
      
     

 

// 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`;        }      });  }