Question

I’m submitting a form via ajax and trying to update a simple progress bar while it’s uploading. The form submission works perfectly but I can’t get the progress bar to update or even request the currently loaded amount.

<form enctype="multipart/form-data">          
    <input name="file" type="file" />
    <button>Update Account</button>
</form>
<progress value="0" max="100"></progress>

jQuery + Ajax

$(document).on("submit", "form", function(){

    var formData = new FormData($('form')[0]);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        xhr: function() {
            myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){
                myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
            }
            return myXhr;
        },
        async:false,
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
});

Upon submitting the form should run addEventListener so that this function is run to update the progress:

function progressHandlingFunction(e){
    if(e.lengthComputable){
        $("progress").attr('value', e.loaded);
        $("progress").attr('max', e.total);
    }
}

but any functions inside myXhr.upload.addEventListener(); just do not seem to run?

myXhr.upload.addEventListener('progress', alert("test"),  false);

works fine, but the below does not run, why would this happen?:

myXhr.upload.addEventListener('progress', function(){alert("test")},  false);

This example uses similar coding:

http://www.matlus.com/html5-file-upload-with-progress/

Answer 1

The problem was:

async:false,

Removing that solved the problem.