JS ProgressEvent is only fired when finished
javascript, jquery, progress, upload, xmlhttprequest-level2
Solution
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
Problem
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?