Can't get image resizing to work with jQuery File Upload

Question

I am trying to utilize the client-side image resizing available in the jQuery File Upload plugin, developed by blueimp: https://github.com/blueimp/jQuery-File-Upload

Unfortunately, I cannot get the image resizing to work. The upload itself works perfectly.

this.$('.fileupload').fileupload({
    url: websiteUrl + 'deed/uploadimage',
    dataType: 'json',
    previewMaxWidth: 90,
    previewMaxHeight: 90,
    previewCrop: true,
    imageOrientation: true,
    disableImageResize: false,
    add: function($, data) {
        _.each(data.files, function(file){
            file.model = self.addImagePreview();
        });
        _.defer(_.bind(data.submit, data));
    },
    done: function($, data) {
        // Quirky shit. Iterate over data.files array while we know that
        // only one file are uploaded at a time...
        _.each(data.files, function(file){
            file.model.set({
                "uploading": false,
                "src": data.response().result.image,
                "preview": data.response().result.cropped
            });
        });
    }
});

I have tried putting a breakpoint in the resizeImage method to see if it for some reason broke on one of the conditions, but the method is never invoked.

All dependencies are loaded in this order:

load-image.min.js
canvas-to-blob.js
jquery.ui.widget.js
jquery.fileupload.js
jquery.fileupload-process.js
jquery.fileupload-image.js
jquery.iframe-transport.js

Am I missing something here?

Answer 1

Found the solution.

Appears that when using the fileupload-process extension, specifying the add function overrides the functionality of the fileupload-process ext. which invokes the processQueue, which is where image resizing and more are registered.

The solution is to attach an event listener to fileuploadadd instead of overriding the add function:

$('.fileupload').fileupload({ ... }).bind('fileuploadadd', callback)

Alternatively, call the original add method from your own add method:

$('.fileupload').fileupload({
    add: function(e, data) {
        $.blueimp.fileupload.prototype.options.add.call(this, e, data);
    }
});