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

  }