Why doesn't Blueimp's jQuery-File-Upload plugin fire callbacks?

Question

I\'m experimenting with Blueimp\'s jQuery-File-Upload plugin, which judging by the demo looks very promising.

It\'s really easy to implement:

var $up         


        

Answer 1

If the add event is defined, all the process callbacks will not fire.

$(function(){
    var fileupload=$('#fileupload').fileupload({
        url: 'fileupload.php',
        dataType: 'json',
        add: function(e, data) {
            data.submit();
        },
    })
    .on('fileuploadprocessalways', function (e, data) {
        //Won't be triggered if add callback is defined
    })
});

Answer 2

I'm the author of the jQuery File Upload plugin.

I don't have an explanation why the fileuploadadd event in your third example code doesn't fire. However, if you override the add callback option, you have to make sure the file upload is started by calling the submit method on the data argument, as explained in the Options documentation for the add callback (and also documented in the source code of the plugin).

e.g. the following code should print out the different callback events:

$('#fileupload').fileupload({
    add: function (e, data) {
        console.log('add');
        data.submit();
    },
    progress: function (e, data) {
        console.log('progress');
    },
    start: function (e) {
        console.log('start');
    }
}).bind('fileuploadadd', function (e, data) {
    console.log('fileuploadadd');
}).bind('fileuploadprogress', function (e, data) {
    console.log('fileuploadprogress');
}).bind('fileuploadstart', function (e) {
    console.log('fileuploadstart');
});

Note also that the plugin is modular and the UI version (used in the download example) makes use of the callback options which would be overridden with the above code. That's why the event binding is so useful, as it allows to define additional callback methods without overriding the callbacks set via the options object.

Answer 3

Not sure if this solves your problem or not, but for me, the following does not work (should work per the documentation:

$uploadButton.bind 'fileuploadchange', (e, data) =>
  # Do something

However, the following works:

$uploadButton.bind 'change', (e, data) =>
  # Do something

Answer 4

Instead of,

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

I used,

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

and it worked for me.

Answer 5

This didn't work for me.

$('#fileupload').fileupload({url: '/url/to/server/'});

$('#fileupload').bind('fileuploaddone', function (e, data) {
   console.log('success!!!');

   console.log(e);

   console.log(data);

});

But this did!

$('#fileupload').fileupload({url: '/url/to/server/'}).bind('fileuploaddone', function (e, data) {
   console.log('success!!!');

   console.log(e);

   console.log(data);

});

My first guess is that in the first case you are binding the event to the actual form input instead of the fileupload object, and in the second, by using chainning you are actually using the fileupload object, I guess the documentation is ambiguous since it reads:

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

And it should read

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