Thumbnail Plupload

I am working on a project and should upload the file to s3. Here is my code:

config = $.extend(Photo.Plupload.config, config);
var uploader = new plupload.Uploader({
            runtimes:'flash,silverlight',
            browse_button:config.select_button,
            max_file_size:config.max_file_size,
            url:'http://' + Photo.Album.Form.bucket + '.s3.amazonaws.com/',
            flash_swf_url:'/assets/plupload/js/plupload.flash.swf',
            silverlight_xap_url:'/assets/plupload/js/plupload.silverlight.xap',
            init:{
                FilesAdded:function (up, files) {
                    /*plupload.each(files, function (file) {
                     if (up.files.length > 1) {
                     up.removeFile(file);
                     }
                     });
                     if (up.files.length >= 1) {
                     $('#' + config.select_button).fadeOut('slow');
                     }*/
                },
                FilesRemoved:function (up, files) {
                    /*if (up.files.length < 1) {
                     $('#' + config.select_button).fadeIn('slow');
                     }*/
                }
            },
            multi_selection:true,
            multipart:true,
            multipart_params:{
                'key':config.key + '/${filename}',
                'Filename':'${filename}', // adding this to keep consistency across the runtimes
                'acl':config.acl,
                'Content-Type':config.content_type,
                'success_action_status':'201',
                'AWSAccessKeyId':Photo.Album.Form.access_key_id,
                'policy':Photo.Album.Form.policy,
                'signature':Photo.Album.Form.signature
            },
            filters:[
                {
                    title:config.filter_title,
                    extensions:config.filter_extentions
                }
            ],
            file_data_name:'file'
        });

        // instantiates the uploader
        uploader.init();

        // shows the progress bar and kicks off uploading
        uploader.bind('FilesAdded', function (up, files) {
            // add pseudofile to the sheet
            console.log(files);
            $.each(files, function (index, value) {
                value.name = "thumb_" + value.name;
            });
            console.log(files);
            console.log(up);
            uploader.start();
        });

        // binds progress to progress bar
        uploader.bind('UploadProgress', function (up, file) {
            /*if (file.percent < 100) {
             $('#progress_bar .ui-progress').css('width', file.percent + '%');
             }
             else {
             $('#progress_bar .ui-progress').css('width', '100%');
             $('span.ui-label').text('Complete');
             }*/
        });

        // shows error object in the browser console (for now)
        uploader.bind('Error', function (up, error) {
            // unfortunately PLUpload gives some extremely vague
            // Flash error messages so you have to use WireShark
            // for debugging them (read the README)

            alert('-  . Firebug  .');
            console.log('Expand the error object below to see the error. Use WireShark to debug.');

            console.log(error);
        });

        // when file gets uploaded
        uploader.bind('FileUploaded', function (up, file) {
            //console.log(up);
            //console.log(file);
            // save file location in the database
            Photo.Album.Form.post(file)
            up.refresh();
        });

The code is working. I upload the file to S3 and get a valid response that I send to process the server. It also resizes client images.

What I'm trying to do now is send a sketch to the server along with the source file. As far as I know, it is impossible to enter several resize parameters in the plupload initializer. What can I do to send not only the source file, but also its modified version to S3? Can I also resize files directly on Amazon?

I am trying to avoid the possibility of downloading a file and resizing my server and downloading it in different resolutions.

Thanks in advance.

+3
source share
2

QueueChanged FileUploaded, refresh. , , BeforeUpload, .

№ 1: , .

№ 2: , bind FileUploaded uploader.init(), FileUploaded file.status DONE .

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();
    }
}
+3

- , (, ) .

        uploader.bind('UploadComplete', function (up, files) {
        console.log(uploader);
            // renew the file object
            if (config.complete == true) {
                // remove all files
                files = [];
                up.settings.multipart_params.key = config.key + '/${filename}';
                up.settings.resize = null;
            } else {
                up.settings.multipart_params.key = config.key + '/thumbs/${filename}';
                up.settings.resize = {width:100, height:100};
                $.each(files, function(index, value){
                    value.percent = 0;
                    value.status = 1;
                });
                config.complete = true;
                up.start();
            }
        });

, 1. "" . 2. → plupload. true. 3. complete → reset .

, . ... .

+1

All Articles