XMLHttpRequest.addEventListener vs XMLHttpRequest.upload.addEventListener

Question

What is the difference between the this code block:

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);

xhr.open("POST", "upload_url");
xhr.send(some_form_data);

and this:

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.upload.addEventListener("load", uploadComplete, false);
xhr.upload.addEventListener("error", uploadFailed, false);
xhr.upload.addEventListener("abort", uploadCanceled, false);

xhr.open("POST", "upload_url");
xhr.send(some_form_data);

I've seen both implementations in blogs and other SO posts, but no one explains why they use one over the other. The only difference I can find at this point is that the latter doesn't work on the default Android browser, while the former seems to work on just about everything.

i think `xhr.upload` is basically used to track uplaod status of the files being uploaded otherwise using first method is always better. — Amareswar, Oct 17 '12 at 05:01

score 9 · Accepted Answer · edited Jun 20 '20 at 09:12

9

According to the w3c specification about the XMLHttpRequest. http://www.w3.org/TR/XMLHttpRequest/#the-upload-attribute

As indicated earlier, each XMLHttpRequest object has an associated XMLHttpRequestUpload object.

Progress events exist for both download and upload transfers. The download events are fired on the XMLHttpRequest object itself, as shown in the above sample. The upload events are fired on the XMLHttpRequest.upload object

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 18 '13 at 02:38

shawnXiao

850
3
9
16

That link is outdated. Here is the new [link](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) – Vraj Shah May 05 '22 at 11:14

XMLHttpRequest.addEventListener vs XMLHttpRequest.upload.addEventListener

1 Answers1