Jquery Blueimp File-Upload callback

Question

I have a simple Image Upload program, where users need to upload large pictures.I am using Blueimp file uploader to upload the image. I am also providing a few input fields for the user to fill meta data of the picture (viz title, author etc).

Idea is that the user press a separate submit button once the form is filled and picture is uploaded. However if the user presses the button before the picture is uploaded it causes errors. I would like to disable the form submit button till the picture is uploaded and progress bar is completed.

$('#submit_main').attr('disabled', 'disabled'); 

should be initial stage and then enabled it with something like

$('#submit_main').removeAttr('disabled');

How do I do the callback after all files are uploaded.

Answer 1

$('#submit_main').attr('disabled', 'disabled'); 
$('#fileupload').bind('fileuploaddone', function (e, data) {
    $('#submit_main').removeAttr('disabled');
});

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

Answer 2

Actually the fileuploaddone event fires when each file uploads. So, if you select multiple files for upload, you'll prematurely enable the submit after the first file completes instead of the last. A better way of doing it would be with the fileuploadprogressall event.

$('#myform').fileupload()
.bind('fileuploadstart', function(){
    // disable submit
})
.bind('fileuploadprogressall', function (e, data) {
    if (data.loaded == data.total){
        // all files have finished uploading, re-enable submit
    }
})