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

Blackman

I'm at the same point fighting with blueimp uploader callbacks, trying to implement an swfUpload-style Flash-bashed component solely to handle the file selection dialog to add multiple file selection to IE. – Altricial

Just out of curiosity, can you confirm what jQuery and uploader versions you are using? I'm using jQ 1.5.2 and the 4.4.2 version of the upload plugin. – Altricial

I've used the most recent, freshly downloaded versions of jQuery and the upload plugin. Anyway, I've moved away from this plugin at the moment and have developed a purely File API based solution (blog.new-bamboo.co.uk/2010/7/30/html5-powered-ajax-file-uploads) which only works with FF4+, Chrome and Safari, but luckily this is acceptable for my purposes now. – Blackman

Answer 1

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.

Blocked

I added: .bind('fileuploadsubmit', function (e, data) { console.log("fileuploadsubmit"); However, it does not fire... – Weitzel

If it was anything like me make sure your <form> tags encompass your controls, the input for adding files has to be contained inside the form. Makes sense when I think about it. – Lansquenet

Glad I found this! Docs say fileuploadadded (github.com/blueimp/jQuery-File-Upload/wiki/Options) – Ophiolatry

Another thing for the googlers, the handlers have to be attached after the target element is rendered. Using .bind() or .live() won't work. – Cobaltite

@Sebastian Tscahan, please help me with this question (2nd time i'm asking help from you) #50975030 – Burnham

Answer 2

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

Sikorsky

Answer 3

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
    })
});

Critchfield

Answer 4

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

Noiseless

Answer 5

Instead of,

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

I used,

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

and it worked for me.

Unreal