Angular Forms Course

Author: jhades

server/file-upload.route.ts

@@ -8,6 +8,10 @@ export function onFileupload(req:Request, res: Response) {
 
   console.log("File uploaded: ", file.name);
 
-  res.status(200).json({message: 'File uploaded successfully.'})
+  setTimeout(() => {
+    res.status(200).json({message: 'File uploaded successfully.'});
+  }, 2000)
+
+
 
 }

src/app/app.module.ts

@@ -42,6 +42,7 @@ import { AddressFormComponent } from './address-form/address-form.component';
 import {CreateCourseStep3Component} from './create-course/create-course-step-3/create-course-step-3.component';
 import {CreateCourseStep1Component} from './create-course/create-course-step-1/create-course-step-1.component';
 import {FileUploadComponent} from './file-upload/file-upload.component';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
 
 @NgModule({
     declarations: [
@@ -86,6 +87,7 @@ import {FileUploadComponent} from './file-upload/file-upload.component';
         MatRadioModule,
         MatCheckboxModule,
         MatStepperModule,
+        MatProgressBarModule,
         FormsModule,
         ReactiveFormsModule
     ],

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

@@ -19,4 +19,4 @@
 
 </div>
 
-
+<mat-progress-bar  class="progress-bar" mode="determinate" [value]="uploadProgress" *ngIf="uploadProgress"></mat-progress-bar>

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

@@ -12,3 +12,7 @@ display: flex;
   margin-left: 10px;
   margin-bottom:15px;
 }
+
+.progress-bar {
+  margin-bottom: 10px;
+}

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

@@ -1,5 +1,6 @@
 import {Component, Input} from '@angular/core';
-import {HttpClient} from '@angular/common/http';
+import {HttpClient, HttpEventType} from '@angular/common/http';
+import {finalize} from 'rxjs/operators';
 
 
 @Component({
@@ -14,6 +15,10 @@ export class FileUploadComponent {
 
   fileName:string = '';
 
+  uploadProgress:number;
+
+  validFileUploaded = false;
+
   constructor(private http: HttpClient) {
 
   }
@@ -33,7 +38,19 @@ export class FileUploadComponent {
       reportProgress: true,
       observe: 'events'
     })
-    .subscribe(console.log);
+    .pipe(
+      finalize(() => {
+        this.uploadProgress = null;
+        this.validFileUploaded = true;
+      })
+    )
+    .subscribe(event => {
+
+      if ( event.type === HttpEventType.UploadProgress ) {
+        this.uploadProgress  = Math.round((100 * event.loaded) / event.total);
+      }
+
+    });
 
   }