Why processQueue in jQuery file uploader doesn't work here?

Question

I am using jquery file uploader . I need files to direct upload from browser to Amazon S3. It is working fine with single upload with minimal setup of plugin. I need three sizes of same file need to directly uploaded to S3. So I think processQueue can be used for it, but didn't get it working until now.

I am working file uploader in requireJS environment. Below is the code, I tried.

$('.fileupload').fileupload({
    url: '//testbucket.s3.amazonaws.com', 
    type: 'POST',
    autoUpload: true,
    dataType: 'xml', // S3's XML response
    add: function (e, d) { console.log('add') };
    success: function (e, d) {},
    processQueue : [
        {
            action : 'loadImage',
            fileTypes : /^image\/(gif|jpeg|png)$/,
            maxFileSize : 5120000
        }, {
            action : 'resizeImage',
            maxHeight : 400,
            crop : false
        }, {
            action : 'saveImage'
        }, {
            action : "setImage"
        }
    ],
    processstart: function (e) {
        console.log('Processing started...');
    },
    process: function (e, data) {
        console.log('Processing ' + data.files[data.index].name + '...');
    },
    processdone: function (e, data) {
        console.log('Processing ' + data.files[data.index].name + ' done.');
    }
});

These are modules I included in my requireJS module.

define(
    [
        'jquery', // jQuery Library
        'jquery.ui.widget', //  https://github.com/blueimp/jQuery-File-Upload
        'load-image',       // https://github.com/blueimp/JavaScript-Load-Image
        'canvas-to-blob',    // https://github.com/blueimp/JavaScript-Canvas-to-Blob
        'jquery.iframe-transport', // https://github.com/blueimp/jQuery-File-Upload 
        'jquery.fileupload',       // https://github.com/blueimp/jQuery-File-Upload
        'jquery.fileupload-process',  //https://github.com/blueimp/jQuery-File-Upload
        'jquery.fileupload-image'  // https://github.com/blueimp/jQuery-File-Upload
    ],

How to solve this problem?

Answer 1

The data parameter allows to override plugin options as well as define ajax settings. https://github.com/blueimp/jQuery-File-Upload/wiki/Options

you set autoupload to false, in your add callback, you iterate through your array of image settings

in each iteration :

set image resize plugin options, change file name submit d