Question

I’m using XmlHttpRequests to upload images to a server and I’d like to show the user the progress of these uploads.

Unfortunately the interval between calls to my onprogress-event handler is too large. Usually onprogress is called only once or twice for a 500k image.

Here is my code:

/* This function is not called often enough */
function progress(e){
    console.log('Uploading: ' + Math.round((e.loaded / e.total) * 100) + ' %');
}

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', progress, false);
xhr.send(data);

Can this behaviour be changed or is this hardcoded somewhere in the browser implementation?

Answer 1

The W3 sets forth the following guidelines in their XMLHttpRequest Level 2 document. Obviously varying levels of conformance across browsers are to be expected.

Uploads:

While the request entity body is being uploaded and the upload complete flag is false, queue a task to fire a progress event named progress at the XMLHttpRequestUpload object about every 50ms or for every byte transmitted, whichever is least frequent. – W3 XMLHttpRequest Level 2 (Bolded for emphasis)

Downloads:

When it is said to make progress notifications, while the download is progressing, queue a task to fire a progress event named progress about every 50ms or for every byte received, whichever is least frequent. – W3 XMLHttpRequest Level 2 (Bolded for emphasis)

I am not aware of an api to customize this functionality.