File upload progress is getting directly to 100% #712

New Issue

2017-03-30T07:28:13Z

sahil1989 commented

2017-03-30 07:28:13 +00:00

(Migrated from github.com)

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

👍 17 😕 1

ruehl commented

2017-04-25 08:55:11 +00:00

(Migrated from github.com)

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.

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. ```javascript 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.

👍 5 🎉 2

Markus-ipse commented

2017-04-28 12:10:58 +00:00

(Migrated from github.com)

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%

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 commented

2017-04-28 14:01:56 +00:00

(Migrated from github.com)

@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 👍

@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 commented

2017-05-12 07:09:17 +00:00

(Migrated from github.com)

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

👍 1

sonnguy commented

2017-06-15 03:36:49 +00:00

(Migrated from github.com)

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.

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.

👍 4

m-ghaoui commented

2018-02-14 14:59:15 +00:00

(Migrated from github.com)

The ChangeDetectorRef worked perfectly for me.

Donkijote commented

2019-12-30 14:15:19 +00:00

(Migrated from github.com)

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

😕 2

MuizMahdi commented

2020-04-19 12:23:46 +00:00

(Migrated from github.com)

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

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

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#712