Blueimp Jquery File Upload Image Re-size option not working when bind with fileuploadadd function

Question

I have been using Blueimp jQuery File Upload plugin for sometime and everything seems working fine. Few days back i added a fileuploadadd callback to push files data to a global array. The file upload works okay but the re-size option set at client side is not working, the image gets uploaded in orginal size. I need to resize the image to 800X600 max width and and height.

$('#eventForm').fileupload({
                disableImageResize: false,
                //filesContainer: $('div.files'),
                autoUpload: false,
                imageMaxWidth: 800,
                imageMaxHeight: 600,
                previewMaxWidth: 150,
                previewMaxHeight: 150,
                maxFileSize: 5000000,
                acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
                singleFileUploads: false,
                downloadTemplateId: 'event-download',
                uploadTemplateId: 'event-upload',
                uploadTemplate: function(o) { 
                    var rows = $();
                    $.each(o.files, function (index, file) {
                    var row = $('<tr class="template-upload bgWhite fade">' +
                       '<td class="floatl"><span class="preview"></span></td>' +
                       '<td class="dispNone"><p class="name"></p>' +
                       '<div class="error"></div>' +
                       '</td>' +
                       '<td class="dispNone"><p class="size"></p>' +
                       '<div class="progress"></div>' +
                       '</td>' +
                       '<td class="dispNone">' +
                       (!index && !o.options.autoUpload ?
                           '<button class="start" disabled>Start</button>' : '') +
                       (!index ? '<button class="cancel">Cancel</button>' : '') +
                       '</td>' +
                       '</tr>');
                    row.find('.name').text(file.name);
                    row.find('.size').text(o.formatFileSize(file.size));
                    if (file.error) {
                       row.find('.error').text(file.error);
                    }
                    rows = rows.add(row);
                    });
                    return rows;
                },
                // Uncomment the following to send cross-domain cookies:
                //xhrFields: {withCredentials: true},                
                url: jQuery('#site').val() + 'events/upload?4aToken=' + jQuery('#4aToken').val(),
                success: function(data){
                    //do success callback here;
                },
            }).bind('fileuploadsubmit', function(e, data) {
                jQuery('.fileupload-progress').removeClass('display-hide');
                //validate file share status
                    if ((jQuery('#shareCkts').val() == null || jQuery('#shareCkts').val() == '')) {
                        data.context.find('button').prop('disabled', false);
                        jQuery('#updateFrmValdtn_Nostalgia').parent().css('display', 'help-block').removeClass('display-hide');
                        jQuery('#updateFrmValdtn_Nostalgia').html('Please share this Nostalgia Moment to circuits').removeClass('dispNone');
                        return false;
                    }
                    var inputs = data.context.find(':input');
//                    if (inputs.filter('[value=""]').first().focus().length) {
//                        data.context.find('button').prop('disabled', false);
//                        return false;
//                    }
                        data.formData = jQuery('#eventForm').serializeArray();
            }).bind("fileuploadadd", function(e, data){
                filesList = [];
                filesList.push(data.files[0]);

            });

I am sending the files data to server on success of another ajax call using:

jQuery('#eventForm').fileupload('send', {files:filesList});

I searched and found that on using fileuloadadd or add callback the plugin options gets reset. Is there anyway i can specify image re-size options with this work flow.

RedYeti · Accepted Answer · 2014-10-24 08:55:24Z

1

By the looks of it you just need to call:

data.submit();

On the data object which appears inside .bind("fileuploadadd"...).

For anyone else reading this - the autoUpload: false, is critical since without that submit() is called automatically.

answered Oct 24, 2014 at 8:55

RedYeti

1,28416 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tomas Over a year ago

Can this answer PLEASE be accepted! The autoUpload: false is the absolute key. The uploadTemplate will never fire if you use the .bind("fileuploadadd"...) event.

Collectives™ on Stack Overflow

Blueimp Jquery File Upload Image Re-size option not working when bind with fileuploadadd function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related