File upload progress is getting directly to 100%

[sahil1989]

trafficstars

While trying to upload a larger file, the progress gets to 100% directly, what could be possible reason for this. awaiting response

[ruehl]

I just had the same problem. After inspecting the FileUploader source, I assume that "progress" refers to the number of uploaded files (and not the number of bytes actually uploaded!) relative to the size of the upload queue (i.e. number of files in that queue). This means that the progress jumps from zero to 100, when the file was uploaded.

As a workaround, I redefined the onProgressItem() function of FileUploader, e.g.

this.fileUploader.onProgressItem = (fileItem: FileItem, progress: any) => {
      console.log(fileItem);
      console.log(progress);
    };

Progress is then a number (integer) between 0 and 100 that increases while the upload of the file progresses. One can then use that number to keep track of the bytes uploaded so far and update a progress indicator accordingly.

[Markus-ipse]

For me onProgressItem() works as expected in Chrome, I.E. it show the progress of the upload for the single file in question, but in Edge onProgressItem() is only triggered once, when the upload is at 100%

[ghost]

@sahil1989 I have exactly the same problem on my Ubuntu 16.04.2 LTS with Chrome 58.

@ruehl nice work ! I will try out your example :+1:

[jodevsa]

try adding this.detector.detectChanges(); after each progress event

[sonnguy]

Inject ChangeDetectorRef to start the change detection manually:

constructor(private changeDetector: ChangeDetectorRef)

this.uploader.onProgressItem = (progress: any) => this.detector.detectChanges();

It work like a charm.

[m-ghaoui]

The ChangeDetectorRef worked perfectly for me.

[Donkijote]

@sonnguy I tried adding your solution but it didn't work, would I be missing something?

[MuizMahdi]

In my case the progress would start with a 100, then keeps increasing from 0 to 100 (100% -> 5% -> 40% -> 90% -> 100%).

Simply count progress if its only less than 100:

if (progress < 100) {
    console.log(progress);
}

And then use item onComplete function to check when it finishes uploading:

item.onComplete = (res) => {
    console.log('Done!');
}

this.uploader.onProgressItem = (item, progress) => {
    if (progress < 100) {
        console.log(progress);
    }
    item.onComplete = (res) => {
        console.log('Done!');
    }
};