[IONIC 4] Progress bar not progressing while uploading file

Hi guys !

I’m implementing a simple progress bar in my Ionic 4 project, but it doesn’t progress at all while I’m uploading a file unless I click anywhere on my app.
If I don’t click, it juste stays at 0, but when I click somewhere, the progress bar gets updated so it progresses.

How to do to make it progress without clicking anywhere ?

Here’s my ts file:

export class MyUploadPage implements OnInit {

    uploadPercent: any = 0;
    videoFileUpload: FileTransferObject;

    constructor(...) {}

    this.videoFileUpload.onProgress((data) => {
          this.uploadPercent = Math.round(data.loaded / data.total);
    });
}

Here’s my progress bar:

<ion-row class="uploading">
  <ion-col text-center>
    <ion-progress-bar [value]="uploadPercent"></ion-progress-bar>
  </ion-col>
</ion-row>

Any ideas ? Thanks !

Ok guys, found something, here’s the solution !
You have to upload your variable inside a NgZone.run:

this.videoFileUpload.onProgress((data) => {
    this.ngZone.run(() => {
        this.uploadPercent = (data.loaded / data.total).toFixed(2);
    });
});

Hope it’ll help someone, someday :wink:

1 Like