Why might XMLHttpRequest ProgressEvent.lengthComputable be false?

Question

I'm trying to implement a upload progress bar the HTML5 way, by using the XMLHttpRequest level 2 support for progress events.

In every example you see, the method is to add an event listener to the progress event like so:

req.addEventListener("progress", function(event) {
    if (event.lengthComputable) {
        var percentComplete = Math.round(event.loaded * 100 / event.total);
        console.log(percentComplete);
    }
}, false);

Such examples always seem to assume that event.lengthComputable will be true. After all, the browser knows the length of the request it's sending, surely?

No matter what I do, event.lengthComputable is false. I've tested this in Safari 5.1.7 and Firefox 12, both on OSX.

My site is built using Django, and I get the same problem on my dev and production setups.

The full code I'm using to generate the form upload is shown below (using jQuery):

form.submit(function() {
    // Compile the data.
    var data = form.serializeArray();
    data.splice(0, 0, {
        name: "file",
        value: form.find("#id_file").get(0).files[0]
    });
    // Create the form data.
    var fd = new FormData();
    $.each(data, function(_, item) {
        fd.append(item.name, item.value);
    });
    // Submit the data.
    var req = new XMLHttpRequest();
    req.addEventListener("progress", function(event) {
        if (event.lengthComputable) {
            var percentComplete = Math.round(event.loaded * 100 / event.total);
            console.log(percentComplete);
        }
    }, false);
    req.addEventListener("load", function(event) {
        if (req.status == 200) {
            var data = $.parseJSON(event.target.responseText);
            if (data.success) {
                console.log("It worked!")
            } else {
                console.log("It failed!")
            }
        } else {
            console.log("It went really wrong!")
        }
    }, false);
    req.addEventListener("error", function() {
        console.log("It went really really wrong!")
    }, false);
    req.open("POST", "/my-bar/media/add/");
    req.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    req.send(fd);
    // Don't really submit!
    return false;
});

I've been tearing my hair out for hours on this. Any help appreciated!

Answer 1

Hey I found the answer from @ComFreek:

I made the same mistake.

The line I wrote was:

xhr.onprogress = uploadProgress;

The correct one should be

xhr.upload.onprogress = uploadProgress;

Answer 2

take a look into this : https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

xhr.upload.addEventListener('progress',function(e){}) will also work.