I'm trying to develop a html-5 uploader with progress bar. I've acplished sending and receiving the file, but the progress bar remains.

All the examples uses something like:

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) { ...

When I type this in my browser console it responds with undefined

var xhr = new XMLHttpRequest(); alert(xhr.upload);

How do I get the hand of the upload object so I can track progress? I've tested in latest Chrome (v16) and Firefox (v9)

I'm trying to develop a html-5 uploader with progress bar. I've acplished sending and receiving the file, but the progress bar remains.

All the examples uses something like:

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) { ...

When I type this in my browser console it responds with undefined

var xhr = new XMLHttpRequest(); alert(xhr.upload);

How do I get the hand of the upload object so I can track progress? I've tested in latest Chrome (v16) and Firefox (v9)

• javascript
• ajax
• html
• xmlhttprequest

• oops. sry about the formating. my first post here. – terjeto Commented Jan 19, 2012 at 14:53
• Does the alert work? The console is of course going to print out undefined because the first is a statement that does not return a value and the second is a a function call that does not return a value. – Stephen Booher Commented Jan 19, 2012 at 15:05
• I would assume it should work since: var xhr = new XMLHttpRequest(); alert(xhr.send); does work.. anyway binding to the xhr.upload gives the error "xhr.upload is undefined" – terjeto Commented Jan 19, 2012 at 15:12

4 Answers 4

This seems to work in the chrome console

var request = new XMLHttpRequest();
request.addEventListener("progress", function(){console.log('progress')});
request.open("POST", "/", true);
request.send(null);

Found the error. When I used the console in a different browser-environment (new tab), it worked. I've located the error to be the Dajaxice library for python which apparently destroys some properties of the native xhr object. Thanks for the help, got me thinking... :-)

Note2-self: Don't assume the console is "clean" when used for debugging.

Try to just set the onprogress directly.

xhr.upload.onprogress = function(evt){console.log('progress')};

and then do what you were doing.

It should work, just creating a new xhr in the console, upload is there. Something else is going on in your code.

It's not dajaxice issue itself but problem of XMLHTTMLRequest.js library it uses see correspondent known and unfixed issue https://github./ilinsky/xmlhttprequest/issues/12

But it's really a blocker to use Dajax/DajaxIce in HTML5 applications