Skip to content
This repository has been archived by the owner on May 25, 2023. It is now read-only.

Upload multiple resolutions of one image with multiple resize options

tim peterson edited this page Dec 27, 2013 · 12 revisions

Put the following code in a JavaScript file and include it after all other file upload plugins:

$.blueimp.fileupload.prototype.processActions.duplicateImage = function (data, options) {
    if (data.canvas) {
        data.files.push(data.files[data.index]);
    }
    return data;
};
$('#fileupload').fileupload({
    processQueue: [
        {
            action: 'loadImage',
            fileTypes: /^image\/(gif|jpeg|png)$/,
            maxFileSize: 20000000 // 20MB
        },
        {
            action: 'resizeImage',
            maxWidth: 1920,
            maxHeight: 1200
        },
        {action: 'saveImage'},
        {action: 'duplicateImage'},
        {
            action: 'resizeImage',
            maxWidth: 1280,
            maxHeight: 1024
        },
        {action: 'saveImage'},
        {action: 'duplicateImage'},
        {
            action: 'resizeImage',
            maxWidth: 1024,
            maxHeight: 768
        },
        {action: 'saveImage'}
    ]
});

Note by @tim-peterson: the above code doesn't give the duplicated, resized images any unique name. I assume that needs to be done in the processActions.