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

Answer 2

FYI - Found the solution [using latest download from github.com/blueimp/] - resizing worked for "Basic Plus" but not "Basic Plus UI" - so by ditching the main.js and adding the new "hybrid" as per below under the last of the JS scripts - all works a treat for the "Basic Plus UI" version to have client side image resizing.

$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = window.location.hostname === 'mydomain.com/' ?
        '//mydomain.com/alldevs/jQuery-File-Upload/' : 'server/php/',

    uploadButton = $('<button/>')
        .addClass('btn btn-primary')
        .prop('disabled', true)
        .text('Processing...')
        .on('click', function () {
            var $this = $(this),
                data = $this.data();
            $this
                .off('click')
                .text('Abort')
                .on('click', function () {
                    $this.remove();
                    data.abort();
                });
            data.submit().always(function () {
                $this.remove();
            });
        });

$('#fileupload').fileupload({
    url: url,
    dataType: 'json',
    autoUpload: false,
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    maxFileSize: 999000,
    // Enable image resizing, except for Android and Opera,
    // which actually support image resizing, but fail to
    // send Blob objects via XHR requests:
    //disableImageResize: /Android(?!.*Chrome)|Opera/
    //    .test(window.navigator.userAgent),
    previewMaxWidth: 120,
    previewMaxHeight: 120,
    previewCrop: false,

    disableImageResize:false,
    imageMaxWidth: 1024,
    imageMaxHeight: 1024,
    imageCrop: false // Force cropped images
    });

    // Load existing files:
    $('#fileupload').addClass('fileupload-processing');
    $.ajax({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: $('#fileupload').fileupload('option', 'url'),
        dataType: 'json',
        context: $('#fileupload')[0]
    }).always(function () {
        $(this).removeClass('fileupload-processing');
    }).done(function (result) {
        $(this).fileupload('option', 'done')
            .call(this, $.Event('done'), {result: result});

})
});

plus the order of JS scripts placed before the above:

jquery.min.js
tmpl.min.js
jquery.ui.widget.js
load-image.all.min.js
canvas-to-blob.min.js
bootstrap.min.js
jquery.iframe-transport.js
jquery.fileupload.js
jquery.fileupload-process.js
jquery.fileupload-image.js
jquery.fileupload-audio.js
jquery.fileupload-video.js
jquery.fileupload-validate.js
jquery.fileupload-ui.js