Handler Function not called in File Upload Progress Using Form Data And jQuery(1.10.2) Ajax

Question

I'm creating a message sending interface along with single file upload (few text field and text areas with one file upload button). I want to show a progress bar while sending message.

I wrote a js function to send message using jquery ajax and it is working fine.

now i m trying to attach progress event. for that i modified my jquery ajax code using google and stack overflow as below:

var form = new FormData(document.getElementById('frm_send_msg'));
    var file = document.getElementById('attachment').files[0];
    if (file) {
        form.append('attachment', file);
    }
    $.ajax({
        url: '/send_msg.php',
        type: 'POST',
        async: false,
        cache: false,
        dataType: 'json',
        contentType: false,
        processData: false,
        data: form,
        xhr: function() {  // custom xhr
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) { // check if upload property exists
                myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // for handling the progress of the upload
            }
            return myXhr;
        },
        success: function(data) {
            //code to hide sending interface
        },
        complete: function() { //     
           alert("complete");
        },
        error: function() {

            alert("ERROR in sending message");
        }
    })

And I wrote a function to handle progress event:

function progressHandlingFunction(evt) {
    console.log('updating fun called');
    // evt is an ProgressEvent.
    if (evt.lengthComputable) {
        console.log('updating');
        var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
        // Increase the progress bar length.
        $(".progress > div").css({
            width: percentLoaded + '%'
        });

    } else {
        console.log('not updating');
    }
}

But i m neither getting any of one console log entry from progressHandlingFunction function nor my .progress div shows any changes.

need help to solve this please!

This is what console is showing in chrome

>XHR finished loading: "http://localhost/send_msg.php". 
  send jquery.js:6
  x.extend.ajax jquery.js:6
  send_msg custom_scripts.js:402
  onclick

One more thing i want to mention here:

My form is inside twitter bootstrap3.0 modal.?

@Ravi: Are you getting any console errors or warnings? Can you please post your HTML code? — J.K.A.
– J.K.A., Commented Dec 20, 2013 at 7:11

J.K.A. · Accepted Answer · 2013-12-20 12:36:55Z

1

I am not sure will it work or not but modify your ajax code to this and try try removing success :function(){} from ajax.

$.ajax({
        url: '/send_msg.php',
        type: 'POST',
        async: false,
        cache: false,
        dataType: 'json',
        contentType: false,
        processData: false,
        data: form,
        xhr: function() {  // custom xhr
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) { // check if upload property exists
                myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // for handling the progress of the upload
            }
            return myXhr;
        },
        complete: function() { //     
//code to hide sending interface
           alert("complete");
        },
        error: function() {

            alert("ERROR in sending message");
        }
    });

Hope it helps you.

answered Dec 20, 2013 at 12:36

J.K.A.

7,36426 gold badges100 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ravikumar Sharma Over a year ago

Thanks you mr/ms/mrs ultimate, it worked like charm.. :)

Collectives™ on Stack Overflow

Handler Function not called in File Upload Progress Using Form Data And jQuery(1.10.2) Ajax

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related