jQuery file upload not resizing images anymore

Question

I use jQuery file upload in my project since three months to upload and resize image files. Everything was working fine until last week. The plugin doesn't resize the images anymore (latest google chrome and latest firefox).

I'm using the same basic configuration on this page https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

Does someone has the same issue and maybe a solution ?

Thanks

Answer 1

I had problems too with jQuery File Upload and manage to solve it by changing the options in the file "jquery.fileupload-image.js" in the following section:

// The File Upload Resize plugin extends the fileupload widget
// with image resize functionality:
$.widget('blueimp.fileupload', $.blueimp.fileupload, {

    options: {
        ...
        // The maximum file size of images to load:
        loadImageMaxFileSize: 20000000, // 10MB
        // The maximum width of resized images:
        imageMaxWidth: 250,
        // The maximum height of resized images:
        imageMaxHeight: 250,
        ...
        // Disable the resize image functionality by default:
        disableImageResize: false,
        ...
    },

Somehow do the options put "somewhere else" (in my case, all code copied from the official tutorial from the official page) not override the default options stated/shown here.

• This could be my fault, so no offense. Anyway, if this advice can help someone else, here it is. Try it out if you like or leave it.

Answer 2

I couldn't get client side image resizing to work and I discovered it was because I had overridden the add method and didn't include code to do the image resizing that was in the original method. I'll post my solution in hopes that it helps save someone some frustration.

<form action="/path/to/uploadHandler" id="multiple-image-upload" enctype="multipart/form-data" method="post" accept-charset="utf-8">
    <input name="files" multiple="multiple" id="files" type="file">
</form>

<div id="file-upload-progress">
    <div id="upload-progress">
        <div class="bar" style="width: 0%;"></div>
    </div>
</div>

<script type="text/javascript">
$(function () {
    $('#multiple-image-upload').fileupload({
        dataType: 'json',
        // 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),
        process:[
            {
                action: 'load',
                fileTypes: /^image\/(gif|jpeg|png)$/,
                maxFileSize: 20000000 // 20MB
            },
            {
                action: 'resize',
                maxWidth: 1920,
                maxHeight: 1200,
                minWidth: 800,
                minHeight: 600
            },
            {
                action: 'save'
            }
        ],
        add: function (e, data) {
            data.context = $('<p/>').text('Uploading '+data.files[0].name+'...').appendTo("#file-upload-progress");
            var $this = $(this);
            data.process(function () {
                return $this.fileupload('process', data);
            }).done(function() {
                data.submit();
            });
        },
        done: function (e, data) {
            data.context.html('<img src="'+data.result.files[0].thumbnailUrl+'" alt="'+data.result.files[0].name+'" />');
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#upload-progress .bar').css(
                'width',
                progress + '%'
            ).text(
                progress + '%'
            );
        }
    });
})();

Answer 3

The best way is what I'm doing at present is:

$('#fileupload').fileupload({
      dataType: 'json',
      url: 'Upload.ashx,
      done: function (e, data) {
      $("#page_navigation").show();
            $.each(data.result, function (index, file) {
            $('#placeholderforimages').append("<img style='height:48px;width:65px;' src='yourimagepath'>");
            }
 });

UPDATE:

Here is the wiki options you need to make an array and need to declare in that

[
    {
        action: 'load',
        fileTypes: /^image\/(gif|jpeg|png)$/,
        maxFileSize: 20000000 // 20MB
    },
    {
        action: 'resize',
        maxWidth: 1920,
        maxHeight: 1200,
        minWidth: 800,
        minHeight: 600
    },
    {
        action: 'save'
    }
],