blueimp jquery-file-upload Doesn't throw error on unsuccessful add

Question

In this plugin we can set various conditions/restrictions on file upload (e.g. acceptFileTypes, maxFileSize, maxNumberOfFiles, etc..)

Whenever a file is added, an event is fired "fileuploadadd" and once the file is added successfully another event is fired "fileuploadadded".

However, when a file is added and it fails one of these condition/restriction (e.g. user tries to upload 2GB file, or text file instead of an image), there is no way find out programatically that this has occurred.

When this conditions fail, no event is fired. What can I use to check that the file user had selected has an error and hence hasn't been added to the queue.

The only way I can think is it fires an "add" event and wait and see if it doesn't fire "added" event then there is a problem. However, I neither want to halt all processing for long time nor wants to check too quickly whether the "added" event has fired or not.

OR

Can anyone please guide on how to throw a custom event (e.g. fileaddfailedevent) from this plugin?

Answer 1

Well, I figured out a way to trigger custom event for this requirement. Posting the answer here in case if anyone is wondering how to achieve the same.

The core file which we need to change should be located at "js\jquery.fileupload-ui.js"

inside the add call back add: function (e, data) { the last listener is }).fail(function () { . This should be at approximately line number 120 (depending on the version)

In that we need to add the following line :
that._trigger('addfileerror', e, data);

To summarize your fail listener should look like below:

}).fail(function () {
if (data.files.error) {
    data.context.each(function (index) {
        var error = data.files[index].error;
        if (error) {
            $(this).find('.error').text(error);
        }
    });
    // added custom event to check whether any error has occured while adding the file.
    that._trigger('addfileerror', e, data); 
}
})

Now we can bind a listener just like any other listener to check for this event.

$('#fileupload').bind('fileuploadaddfileerror', function (e, data){
    console.log('Custom Error Event Fired');
});

Hope this helps someone.

UPDATE:

Even though the document doesn't mention it clearly, I have just learnt that "fileuploadprocessfail" event does exactly the same for the above requirement.