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