XMLHttpRequest event onProgress is being fired only when file has finished upload

Question

I have the following AJAX code, the script upload the file to the server correctly (node express). The problem I am a facing is that the onProgress is fired only when the total byte are downloaded (so at the end of file upload) and not during its progress.

Currently I am not able to show in the client some UI for file upload progression.

I would like to know if this problem is related to AJAX call or could be related to server.

 var formData = new FormData(); var xhr = new XMLHttpRequest(); var onProgress = function (e) { if (e.lengthComputable) { var percentComplete = (e.loaded / e.total) * 100; console.log(percentComplete); } }; var onLoad = function (event) { var reponse = JSON.parse(xhr.responseText); this._logicAddWdg(reponse); }.bind(this); var onError = function (err) { console.log(onError); }; formData.append('file', this._uploaderFile); xhr.addEventListener('error', onError, false); xhr.addEventListener('progress', onProgress, false); xhr.addEventListener('load', onLoad, false); xhr.open('post', '/uploads', true); xhr.send(formData);

Server headers response:

Accept-Ranges:bytes Cache-Control:public, max-age=0 Connection:keep-alive Content-Length:5510872 Content-Range:bytes 0-5510871/5510872 Content-Type:video/mp4 Date:Tue, 11 Apr 2017 12:02:20 GMT ETag:W/"5416d8-15b5ce4a545" Last-Modified:Tue, 11 Apr 2017 12:02:20 GMT X-Powered-By:Express Request Headers view source Accept:*/* Accept-Encoding:identity;q=1, *;q=0 Accept-Language:en-US,en;q=0.8 Cache-Control:no-cache Connection:keep-alive Host:localhost:8080 Pragma:no-cache Range:bytes=0-

Musa · Accepted Answer · 2017-04-11 12:41:54Z

Attach your upload event handler to XMLHttpRequest.upload.

xhr.upload.addEventListener('progress', onProgress, false);

xhr.upload handles the events of the uploaded data. What you had before handled the progress of the response download.
All the other handlers should remain the same.

many thanks it works,... but could you please provide me a short explanation? Should I change to xhr.upload to all events?

Danny · Accepted Answer · 2017-04-11 12:58:12Z

Are you testing it online or on your machine? If you are testing this code locally and you're uploading a rather small file (it seems you're uploading a ~5MB video file), you can't see any progress because the time it will take to upload it's proportional to a simple copy/paste operation done on your system.

Try uploading a bigger file or try it online, your code seems correct.

I am using a big file on my local environment. server is also on localhost, an I am using Throttling the Network in Chrome DevTools. Could be the problem this one?
Maybe throttling is not working as expected? Or maybe you're using an high bandwidth profile

Collectives™ on Stack Overflow

XMLHttpRequest event onProgress is being fired only when file has finished upload

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related