Plupload resize for worpdress

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.