JS ProgressEvent is only fired when finished

Question

I am having some problems getting my upload progress bar to work properly.

According to the XMLHttpRequest Level 2 specs, I attached event listeners for loadstart and progress like this:

var xhr = $.ajaxSettings.xhr();
xhr.upload.addEventListener('loadstart', function(e) {progressCallback(0);});
xhr.upload.addEventListener('progress', function (e) {
    progressCallback(e.loaded / e.total);
});    

$.ajax({
    url: url,
    type: 'POST',
    processData: false,
    contentType: false,
    data: formData,
    xhr: function () {
        return xhr;
    }
}).done(function (data) {
    // Finish stuff
})

The file is correctly uploaded but the progress listener is only called once the request is finsished with 100% (e.total == e.loaded)

Is anything wrong with the code above or is it necessary to configure the server in any special way?

Answer 1

When the total size of the file can't be determine, e.loaded and e.total are zero. You can check this inside your progress function:

if (evt.lengthComputable) {
    progressCallback(e.loaded / e.total);
}

The server must also send Content-Length which is defined in the specification:

If the length of the HTTP entity body is known through the Content-Length header, initialize the lengthComputable attribute to true and initialize the total attribute to the length.

Please also notice that the progress bar don't work with the file: protocol.

I can really recommend the Mozilla docs which are very extensive - Using XMLHTTPRequest Mozilla Docs