Progress Bar in ng2-file-upload in Angular 6

Question

Id like to create a progress bar to my file upload.

The Upload I'm using is: https://www.npmjs.com/package/ng2-file-upload.

app.component.html

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <input type="file" name="myFile" ng2FileSelect [uploader]="uploader" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <button type="button" class="btn btn-success btn-s" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
                Upload an Image
            </button>
        </div>
    </div>
</div>

app.component.ts

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

const URL = 'url to API';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
public uploader: FileUploader = new FileUploader({ url: URL, itemAlias: 'myFile' });

  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');
    };
 }
}

Everything is working fine but Id like to put a progress bar, only this.

score 6 · Answer 1 · answered Aug 10 '18 at 05:44

6

You can listen to progress here

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

answered Aug 10 '18 at 05:44

Paresh Gami

4,777
5
23
41

very good.Very clear answer and I understand. But The Onprogress means the moment to post/upload. I'm try to keep and control the progress until receive the response from API where the file was uploaded and processed. I'm using your type to first part of progress plus onSuccessItem *code*: ` this.uploader.onProgressItem = (progress: any) => { console.log(progress['progress']); }; this.uploader.onSuccessItem = (progress: any) => { console.log('I receive the response file posted in API'); };` Can u see more forms to get the progress between those 2 methods? – Adriano Frota Aug 10 '18 at 06:25
1

Cool.! If that was helpful please help to gain points as well. Mark accepted and upvote please – Paresh Gami Aug 10 '18 at 06:27

score 0 · Answer 2 · answered Jun 25 '19 at 21:16

0

In your app.component.html include :

<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
</div>

answered Jun 25 '19 at 21:16

Alferd Nobel

3,185
2
30
35

Progress Bar in ng2-file-upload in Angular 6

2 Answers2

Linked