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-

Answer 1

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.