Why doesn't Blueimp's jQuery-File-Upload p

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 $uploadButton = $("#fileop-upload");// <input type="file" id="fileop-upload" [etc] />
$uploadButton.fileupload({
    url : "//domain/path/to/receive-uploaded-files"
});

The selected files are uploaded fine without refreshing the page as expected, but of course with a minimal configuration like this the user won't get any notification. Here's where the plugin's callbacks would come in handy.

According to the documentation there are two ways to define callbacks. For example the add event (which fires whenever a file is selected for uploading) can be added in the original configuration object like this:

$uploadButton.fileupload({
    add : addFileListener,
    url : "//domain/path/to/receive-uploaded-files"
});

or alternatively:

$uploadButton.bind("fileuploadadd", addFileListener);

However I've found that only the first approach works, the second one doesn't do anything.

It is even more curious that no other callbacks -- especially progress and start -- seems to be firing not matter how I bind them:

$uploadButton.fileupload({
    add : addFileListener,
    progress : progressListener,
    start : startListener,
    url : "//domain/path/to/receive-uploaded-files"
});

or

$uploadButton.fileupload({
    add : addFileListener,
    url : "//domain/path/to/receive-uploaded-files"
});
$uploadButton.bind("fileuploadprogress", progressListener");
$uploadButton.bind("fileuploadstart", startListener");

I have the referred listener functions defined, and the code doesn't report any errors or warnings.

What is the explanation for the .bind method's failure, and why doesn't the progress or the start listeners ever activate?

Answer 1

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) {/* ... */});

Answer 2

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 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

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 5

Instead of,

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

I used,

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

and it worked for me.