Angular Forms In Depth

Author: Your Name

src/app/file-upload/file-upload.component.html

@@ -17,3 +17,9 @@
     </button>
 
 </div>
+
+<mat-progress-bar class="progress-bar" mode="determinate"
+                  *ngIf="uploadProgress"
+                  [value]="uploadProgress">
+
+</mat-progress-bar>

src/app/file-upload/file-upload.component.ts

@@ -1,8 +1,7 @@
 import {Component, Input} from '@angular/core';
 import {HttpClient, HttpEventType} from '@angular/common/http';
 import {catchError, finalize} from 'rxjs/operators';
-import {AbstractControl, ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator} from '@angular/forms';
-import {noop, of} from 'rxjs';
+import {of} from 'rxjs';
 
 
 @Component({
@@ -19,6 +18,8 @@ export class FileUploadComponent {
 
     fileUploadError = false;
 
+    uploadProgress:number;
+
     constructor(private http: HttpClient) {
 
     }
@@ -37,14 +38,24 @@ export class FileUploadComponent {
 
             this.fileUploadError = false;
 
-            this.http.post("/api/thumbnail-upload", formData)
-                .pipe(
-                    catchError(error => {
-                        this.fileUploadError = true;
-                        return of(error);
-                    })
-                )
-                .subscribe();
+            this.http.post("/api/thumbnail-upload", formData, {
+                reportProgress: true,
+                observe: 'events'
+            })
+            .pipe(
+                catchError(error => {
+                    this.fileUploadError = true;
+                    return of(error);
+                }),
+                finalize(() => {
+                    this.uploadProgress = null;
+                })
+            )
+            .subscribe(event => {
+                if (event.type == HttpEventType.UploadProgress) {
+                    this.uploadProgress = Math.round(100 * (event.loaded / event.total));
+                }
+            });