Jquery Blueimp file upload callback

Question

I have a simple image upload program where users need to upload large pictures. I am using the Blueimp file downloader to upload an image. I also provide several input fields for the user to fill in the image metadata (e.g. title, author, etc.).

The idea is that the user presses a separate submit button after filling out the form and uploading the image. However, if the user clicks the button before downloading the image, it causes errors. I would like to disable the submit button of the form until the image is uploaded and the progress bar is complete.

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

should be initial and then enable it with something like

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

How to call back after downloading all files.

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

In fact, the fileuploaddone event fires when each file loads. Thus, if you select multiple files to upload, you will prematurely enable upload after the first file is completed, and not the last. The best way to do this 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 } })