Plupload resize for worpdress

The following Code will enable client side image resize everywhere:

1. Put a file named client-side-image-resize.php in your mu-plugins directory (wp-content/mu-plugins/)

   function client_side_resize_load() {
       wp_enqueue_script( 'client-resize' , plugins_url( 'client-side-image-resize.js' , __FILE__ ) , array('media-editor' ) , '0.0.1' );
       wp_localize_script( 'client-resize' , 'client_resize' , array( 
           'plupload' => array(
                   'resize' => array(
                   'enabled' => true,
                   'width' => 1920, // enter your width here
                   'height' => 1200, // enter your width here
                   'quality' => 90,
               ),
           )
       ) );
   }
   add_action( 'wp_enqueue_media' , 'client_side_resize_load' );
   

   The php will create a js object named client_resize and enqueue the following script.

2. Save another file named client-side-image-resize.js in the same directory:

   (function(media){
       var oldReady = media.view.UploaderWindow.prototype.ready;
       media.view.UploaderWindow.prototype.ready = function() {
           if ( ! this.options.uploader.plupload )
               this.options.uploader.plupload = client_resize.plupload;
           // back to default behaviour
           oldReady.apply( this , arguments );
       };
   })(wp.media);
   

   The JS is configuring Plupload to resize images on client side before uploading them.

The next step would be to scan WPs image sizes for the largest possible size, in order to auto configure the client_resize js object.

I've done a Plupload using the Front End. The WordPress Plupload is very customised, so I've implemented from the scratch as a Plugin. I'll show an example using functions.php

Download the Plupload from http://www.plupload.com/download/ and put in your theme inside a js/thirdparty/plupload/{all_files}

Code to use on functions.php

    //Plupload File
    wp_enqueue_script( 'plupload', get_template_directory_uri() . '/js/thirdparty/plupload/js/plupload.full.min.js', array( 'jquery' ) );
    //Plupload Queue File (up to you using queue)
    wp_enqueue_script( 'plupload-queue', get_template_directory_uri() .'/js/thirdparty/plupload/js/jquery.plupload.queue.min.js', array( 'jquery' ) );
    //Your own JS (make sure you set the dependencies)
    wp_enqueue_script( 'my-functions', get_template_directory_uri() .'/js/functions.js', array( 'jquery' , 'plupload', 'plupload-queue' ) );

    //Send the wp-admin/wp-ajax.php to the Javascript:
    wp_localize_script( 'my-functions', 'customObj', array(
        'ajax_url' => admin_url( 'admin-ajax.php' )
    ) );


    //AJAX Upload function
    add_action( 'wp_ajax_my_custom_plupload_ajax_method', 'process_ajax_my_custom_plupload_ajax_method' );
    add_action( 'wp_ajax_nopriv_my_custom_plupload_ajax_method', 'process_ajax_my_custom_plupload_ajax_method' );

    //Here you will code your upload depends on your needs:
    function process_ajax_my_custom_plupload_ajax_method() {
        $mimes = array(
            'jpg' =>'image/jpg',
            'jpeg' =>'image/jpeg',
            'gif' => 'image/gif',
            'png' => 'image/png'
        );


        $uploadedfile = $_FILES['file']; //Default from Plupload.

        //You could use media_handle_upload also, up to you.
        $upload_overrides = array( 'test_form' => false, 'mimes' => $mimes );
        $movefile = wp_handle_upload( $uploadedfile, $upload_overrides );


        if ( is_wp_error( $movefile ) ) {
            return wp_send_json_error( $movefile );
        } else {
            return wp_send_json_success( $movefile );
        }
    }

Than you can use JS like normally you'd use

Code to use in /js/functions.js:

var uploader = new plupload.Uploader({
    runtimes : 'html5, flash, silverlight, html4',
    url : customObj.ajax_url, //it comes with wp_localize_script
    drop_element: 'sortable', //up to you
    chunk_size : '1mb',
    unique_names : true,

    resize : {width : 320, height : 240, quality : 90}, //Here you go to resize images

    browse_button : 'pickfiles', // you can pass in id...
    container: 'container', // ... or DOM Element itself

    filters : {
        max_file_size : '2mb',

        // Specify what files to browse for
        mime_types: [
            {title : "Image files", extensions : "jpeg,jpg,gif,png"}
        ],
        prevent_duplicates: true
    },

    multipart_params: {
        'action': 'my_custom_plupload_ajax_method' //Depends on the PHP method
    },

    //Flash settings
    flash_swf_url : '/plupload/js/Moxie.swf',

    // Silverlight settings
    silverlight_xap_url : '/plupload/js/Moxie.xap',

    init: {
        PostInit: function() {
            document.getElementById('filelist').innerHTML = '';

            document.getElementById('uploadfiles').onclick = function() {
                uploader.start();
                return false;
            };
        },

        FilesAdded: function(up, files) {
            plupload.each(files, function(file) {
                document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
            });
        },

        UploadProgress: function(up, file) {
            document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
        },

        Error: function(up, err) {
            document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
        },
        FileUploaded: function(up, file, info) {
            var photo = JSON.parse(info.response);
            console.log(photo); //Here you'll use in your JS. That's the WP result.
        }
});

uploader.init();

The method to upload, you can use either media_handle_upload if you want it into your media or wp_handle_upload for upload by itself (can be used for any file, you just need to change the mime_types).

Hope works for you.