Skip to content

Commit

Permalink
Upload progress incorrect in Google Chrome (#1016)
Browse files Browse the repository at this point in the history
Sometimes the browser doesn't has the correct file size onloadstart. like described here: #1002 (comment)

During debugging i have found out, that this bug is present in Chrome. In Chrome there is often a total wrong total size (see comment) and in Firefox there is sometime a little difference between the total size onloadstart and onprogress.

We should set file.size like in earlier versions also in onprogress event and check in progress event, if the upload is already complete.
  • Loading branch information
mkszepp authored Nov 10, 2023
1 parent c3af01e commit ccf2363
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 2 deletions.
12 changes: 10 additions & 2 deletions ember-file-upload/src/system/upload.ts
Original file line number Diff line number Diff line change
Expand Up @@ -92,13 +92,20 @@ export function upload(
if (!evt.lengthComputable || evt.total === 0) return;

file.loaded = evt.loaded;
file.size = evt.total;
// It occurs that the evt.total is not always correct.
// For this reason we should hold the max file size.
// The correct should be returned while progress
file.size = Math.max(file.size, evt.total);
file.progress = (file.loaded / file.size) * 100;
};

request.onprogress = function (evt) {
if (!evt) return;
if (!evt.lengthComputable || evt.total === 0) return;
// We need to check also for isUploadComplete, because the browsers brings sometimes the onprogress after onloadend event
if (!evt.lengthComputable || evt.total === 0 || file.isUploadComplete)
return;

file.size = evt.total;

// When the progress is completed there is possible that we get the `Content-Length` response header of the upload endpoint as loaded / total.
// There is possible that `Content-Length` is lower or higher than the already loaded bytes.
Expand All @@ -118,6 +125,7 @@ export function upload(

file.loaded = file.size;
file.progress = (file.loaded / file.size) * 100;
file.isUploadComplete = true;
};

request.ontimeout = () => {
Expand Down
5 changes: 5 additions & 0 deletions ember-file-upload/src/upload-file.ts
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,11 @@ export class UploadFile {
*/
@tracked progress = 0;

/**
* When upload has finished this property will be set to true
*/
@tracked isUploadComplete = false;

/**
* The current state that the file is in.
*/
Expand Down

0 comments on commit ccf2363

Please sign in to comment.