Does the XHR progress event not fire until the download completes?

Question

I use the following $ .ajax command to download a file from the PhoneGap application:

function updateProgress( evt ) { if ( evt.lengthComputable ) { var percentComplete = evt.loaded / evt.total * 100; console.log( percentComplete + "%" ); } } $.ajax({ url: url, type: "POST", data: data, cache: false, dataType: "json", processData: false, contentType: false, success: successCallback, error: errorCallback, xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.addEventListener( "progress", updateProgress, false); return xhr; } }); 

Download is working fine. However, a progress event is only triggered once the download is complete. During boot, it does not work at all - so the boot process is not displayed. When downloading, there is a pause, and then 100% is displayed.

Any ideas what I'm doing wrong?

Answer 1

progress loading events are xhr.upload on xhr.upload , so attach the listener to this, not xhr . The xhr object also has progress events, but this is for the response returned from the server.

See the MDN article for more details.

 xhr.upload.addEventListener('progress', updateProgress, false) 

_{^{(Thanks to A. Wolf and his comment on OP.)}}