3

XMLHttpRequest 2 has a new thing. It can upload files. I got that working (it's super easy). Now I'm wondering if there's a way to get the upload progress of that file. I wouldn't be interested in this normally, but in Google Chrome (8) I saw that the onreadystatechange event is a XMLHttpRequestProgressEvent. Progress... There's nothing in there about upload progress (just request state), but it made me wondering.

Google Chrome has a progress 'counter' when uploading big files natively. It's standard. It's always there and unconfigurable. It's in the statusbar. Is something like that possible with Javascript? I'd like to put it in a nice <progress> element or something.

I don't want SWF or Java uploaders (with polling and >JS callbacks). It has to be native. If the browser can do it, these days Javascript should be able to do it, right!? =)

In case of no XMLHttpRequest 2, I guess it wouldn't be possible with the very standard file upload (no ajax and just a <input type=file>).

Thanks for the info

Rudie
  • 52,220
  • 42
  • 131
  • 173

1 Answers1

9

Hook the progress event. That will give you progress for all requests. Check first to see if the upload object is available -- that will give you progress for only the upload part.

Something like this:

var xhr; // this is your XMLHttpRequest

// hook to upload events if available, otherwise snag all progress events
var eventSource = xhr.upload || xhr;

eventSource.addEventListener("progress", function(e) {
    // normalize position attributes across XMLHttpRequest versions and browsers
    var position = e.position || e.loaded;
    var total = e.totalSize || e.total;

    // TODO: display progress
});
Chris Hynes
  • 9,999
  • 2
  • 44
  • 54
  • xhr.upload and xhr both have progress events? What's the difference? The only function of XHR is to upload, no? – Rudie Dec 13 '10 at 20:15
  • xhr.onprogress fires only on start/end server response. xhr.upload.onprogress fires every so often until upload complete. Is that expected and functional behaviour? – Rudie Dec 13 '10 at 20:23
  • 2
    It's not very clear, and differs depending on which browser and which XMLHttpRequest version your using. Basically, xhr.onprogress fires for uploads and downloads. xhr.upload.onprogress fires only for uploads. xhr.upload is only implemented in XMLHttpRequest version 2. By hooking xhr.upload.onprogress if it is available, or else xhr.onprogress, you get upload progress no matter which version you are using. You will also get progress on the response if you hook xhr.onprogress (i.e. XMLHttpRequest v1). – Chris Hynes Dec 14 '10 at 18:13