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-

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-

• javascript
• jquery
• node.js
• ajax
• xmlhttprequest

2 Answers 2

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.

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.