how to add Upload Progress bar to files upload in Angular6

Question

I used this code to upload files in Angular 6.

Everything works fine but I need to add the progress bar to the code. After searching from stackoverflow, I saw this code below but being new to angular or angular6 I do not know how to integrate it or make the progress bar works with the angular form submission.

this.uploader.onProgressItem = (progress: any) => {    
  console.log(progress['progress']);    
};

this.uploader.onSuccessItem = (progress: any) => {
  console.log('I receive the response file posted in API');    
};

Progress Bar in ng2-file-upload in Angular 6

Below is the code

app.component.ts:

import { Component, OnInit } from '@angular/core';
import { FileUploader, FileSelectDirective } from 'ng2-file-upload/ng2-file-upload';

const URL = 'http://localhost:3000/api/upload';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
    title = 'app';

    public uploader: FileUploader = new FileUploader({ url: URL, itemAlias: 'photo' });

    ngOnInit() {
        this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };
        this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
            console.log('ImageUpload:uploaded:', item, status, response);
            alert('File uploaded successfully');
        };
    }
}

app.component.html:

<input type="file" name="photo" ng2FileSelect [uploader]="uploader" />
<button type="button" class="btn btn-success btn-s"
  (click)="uploader.uploadAll()"    
  [disabled]="!uploader.getNotUploadedItems().length" >
  Upload an Image  
</button>

score 0 · Answer 1 · answered Oct 19 '18 at 17:01

If you use HttpClient to upload a file, you can retrieve the progress status from the upload request. You would basically have a method that looks like this:

public upload(endPoint: string, payload: any): Observable<any> {
    const req = new HttpRequest('POST', this.apiUrl + endPoint, payload, {reportProgress: true});
    return this.http.request(req);
}

This method returns a response containing the progress of the upload. You can then create an attribute in your component that computes the completed percent of the upload:

...
if (event.type === HttpEventType.UploadProgress) {
  this.percentComplete = Math.round(100 * event.loaded / event.total);
} else if (event.type === HttpEventType.Response) {
  // do something with body event.body
}
...

score 0 · Accepted Answer · answered Oct 19 '18 at 17:33

since you are using ng2-file-upload library, you can utilize the progress from this.uploader.queue and show it in your html.

uploader.queue is an array. if you are using it for single file upload you can access the uploading item from uploader.queue[0] and show your progress bar i.e:

<div class="progress-bar progress-bar-success" [ngStyle]="{ 'width': uploader.queue[0].progress + '%', 'height': '5px' }" tooltip="{{uploader.queue[0].progress}}% uploaded" placement="bottom"></div>

am using bootstrap 4 progress bar class in this example. Hope this helps.

I amend your code a little bit and it works for me. Here is it.

thanks — jmarkatti, Oct 19 '18 at 21:50

how to add Upload Progress bar to files upload in Angular6

2 Answers2