jQuery file upload plugin not calling success callback

Question

I am using jQuery fileupload plugin and I want to do some custom jQuery stuff once fileupload is done

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

Now it says this

Callback for successful upload requests.
$('#fileupload')
       .bind('fileuploaddone', function (e, data) {/* ... */})

Now I have defined this custom function for testing in my own js file

$('#fileupload').bind('fileuploaddone', function (e, data) {/* ... */
alert('Hello');
})

But it's not working.

But if I edit the main file in here

  // Callback for successful uploads:
            done: function (e, data) {

Then it works.

Answer 1

Check if the server-side uploading script returns a JSON reply - in my case it didn't work when the reply was empty, but file was uploaded successfully.

So, below is working for me with jQuery 1.9.1 and the newest version of the "jQuery File Upload Plugin" - 5.21.3

$("#fileupload").bind("fileuploaddone", function (e, data) {
    console.log("fileuploaddone event fired");
});

Answer 2

Looking at the library code, seems all events are renamed removing 'fileupload' ... so 'fileuploaddone' becomes just 'done'. It is valid for all other callbacks. look at this section:

    // Other callbacks:
    // Callback for the submit event of each file upload:
    // submit: function (e, data) {}, // .bind('fileuploadsubmit', func);
    // Callback for the start of each file upload request:
    // send: function (e, data) {}, // .bind('fileuploadsend', func);
    // Callback for successful uploads:
    // done: function (e, data) {}, // .bind('fileuploaddone', func);
    // Callback for failed (abort or error) uploads:
    // fail: function (e, data) {}, // .bind('fileuploadfail', func);
    // Callback for completed (success, abort or error) requests:
    // always: function (e, data) {}, // .bind('fileuploadalways', func);
    // Callback for upload progress events:
    // progress: function (e, data) {}, // .bind('fileuploadprogress', func);
    // Callback for global upload progress events:
    // progressall: function (e, data) {}, // .bind('fileuploadprogressall', func);
    // Callback for uploads start, equivalent to the global ajaxStart event:
    // start: function (e) {}, // .bind('fileuploadstart', func);
    // Callback for uploads stop, equivalent to the global ajaxStop event:
    // stop: function (e) {}, // .bind('fileuploadstop', func);
    // Callback for change events of the fileInput(s):
    // change: function (e, data) {}, // .bind('fileuploadchange', func);
    // Callback for paste events to the pasteZone(s):
    // paste: function (e, data) {}, // .bind('fileuploadpaste', func);
    // Callback for drop events of the dropZone(s):
    // drop: function (e, data) {}, // .bind('fileuploaddrop', func);
    // Callback for dragover events of the dropZone(s):
    // dragover: function (e) {}, // .bind('fileuploaddragover', func);

If you have some doubts about what's happening, just look at the code inside. This library is not compressed so it is easy to see. for example

// start: function (e) {}, // .bind('fileuploadstart', func);

start callback is implemented. fileuploadstart is not.