javascriptxmlhttprequest-level2

xhr.upload.onprogress doesn't work


Everything in the following code will work, except it will never fire the xhr.upload.onprogress event.

$(function(){

    var xhr;

    $("#submit").click(function(){
        var formData = new FormData();
        formData.append("myFile", document.getElementById("myFileField").files[0]);
        xhr = new XMLHttpRequest();
        xhr.open("POST", "./test.php", true);
        xhr.send(formData);

        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                console.log(xhr.responseText);              
            }
        }

        xhr.upload.onprogress = function(e) {
           // it will never come inside here
        }
    });
}); 

Solution

  • You should create the listeners before opening the connection, like this:

    $(function(){
    
        var xhr;
    
        $("#submit").click(function(){
            var formData = new FormData();
            formData.append("myFile", document.getElementById("myFileField").files[0]);
            xhr = new XMLHttpRequest();
    
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4 && xhr.status === 200){
                    console.log(xhr.responseText);              
                }
            }
    
            xhr.upload.onprogress = function(e) {
               // it will never come inside here
            }
    
            xhr.open("POST", "./test.php", true);
            xhr.send(formData);
        });
    });
    

    Hope that helps.