Plupload Create multiple sized thumbnails - image-uploading

Question

I have found this thread on creating and uploading thumbnail images client side. The tread shows how to upload the first image then follow up by resizing it and uploading again. I was wondering if there is an easy way to add another step so the end result would produce and original, medium size and thumbnail
A better solution is to trigger QueueChanged in the FileUploaded handler, and then call refresh. This will initiate the upload again for the same file and you can set a property that you read in the BeforeUpload handler to adjust the file size.
Warning #1: you should upload the thumbnail after the full-sized image, otherwise the full-sized image may have some buffer issues and get cut off.
Warning #2: This will only work if the bind call for FileUploaded happens after uploader.init(), otherwise the uploader's own handler for FileUploaded will overwrite file.status back to DONE after your handler.
below is the original response from this thread Plupload Thumbnail
uploader.bind('BeforeUpload', function(up, file) {
if('thumb' in file)
up.settings.resize = {width : 150, height : 150, quality : 100};
else
up.settings.resize = {width : 1600, height : 1600, quality : 100};
}
uploader.bind('FileUploaded', function(up, file) {
if(!('thumb' in file)) {
file.thumb = true;
file.loaded = 0;
file.percent = 0;
file.status = plupload.QUEUED;
up.trigger("QueueChanged");
up.refresh();
}
}

Answer 1

is quite simple, I did that in my project, with two minor adjustments.
In the upload.php I made the directory information dynamically:
$diretorio = $_REQUEST["diretorio"];
$targetDir = 'upload/'.$diretorio;
and changed the code in the upload interface:
uploader.bind('BeforeUpload', function(up, file) {
if('thumb' in file){
//thumb
up.settings.url = 'upload/upload.php?diretorio=thumbs',
up.settings.resize = {width : 100, height : 75, quality : 60};
// medium size
up.settings.url = 'upload/upload.php?diretorio=medium',
up.settings.resize = {width : 200, height : 150, quality : 60};
}else{
up.settings.url = 'upload/upload.php?diretorio=full-size',
up.settings.resize = {quality : 100};
}
uploader.bind('FileUploaded', function(up, file) {
if(!('thumb' in file)) {
file.thumb = true;
file.loaded = 0;
file.percent = 0;
file.status = plupload.QUEUED;
up.trigger("QueueChanged");
up.refresh();
}
});
});

Answer 2

the answer given by Eduardo de Souza is very useful to me but there some change to work this code here can't upload medium file and the other is image can't be resize as resize param given i found some changes in my case which is:
var i = 1;
uploader.bind('BeforeUpload', function (up, file) {
if ('thumb' in file) {
if (i == 1) {
//thumb
up.settings.url = 'http://localhost/plupload_new/public_html/upload.php?diretorio=thumb',
up.settings.resize = {width: 80, height: 80, enabled: true};
} else {
// medium size
up.settings.url = 'http://localhost/plupload_new/public_html/upload.php?diretorio=medium',
up.settings.resize = {width: 800, height: 600, enabled: true};
}
} else {
up.settings.url = 'http://localhost/plupload_new/public_html/upload.php?diretorio=full';
}
uploader.bind('FileUploaded', function (up, file) {
if (!('thumb' in file)) {
file.thumb = true;
file.loaded = 0;
file.percent = 0;
file.status = plupload.QUEUED;
up.trigger("QueueChanged");
up.refresh();
} else {
if (i < 2) {
i++;
file.medium = true;
file.loaded = 0;
file.percent = 0;
file.status = plupload.QUEUED;
up.trigger("QueueChanged");
up.refresh();
}
}
});
});
have added a attribue enabled:true in resize param which make image resize and some checking with i variable for geting notice on medium url also,
i think this can be useful.