1

So, for the Plupload, I know there is a documentation to how to resize the image on the client side before uploading : http://www.plupload.com/docs/Image-Resizing-on-Client-Side

However, I am not sure how to do it for Wordpress.

Could you guys give me a guidance to how to do this?

Thank you so much!

Regards

  • Sorry, are using it on Front End or on Back End? Are you using the WP Media Uploader or PlUpload by itself? I've done it referring my own PlUpload. – Leo Caseiro Feb 16 '15 at 23:58
  • Hi Thank you for the reply. I am referring to the Plupload on the front end. (So, that user on the front end can upload images). Thank you! =) – steve Kim Feb 17 '15 at 5:46
1

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.

  • Thank you for the awesome help. So, I want to go over what you have written. Wordpress plupload is customised, so we are overriding this with our own plupload. In order to do that, I need to download plupload and copy the php and js code you have written in functions.php and .js. At this point, this new plupload will overrider the Wordpress default plupload. Now, I am assuming I can simply add the following code to the js file in order to resize the image? resize: {width: 100,height: 100} (Say, I want to resize a newly taken photo on mobile from 3MB to 0.5Mb even before uploading happens) – steve Kim Feb 17 '15 at 23:25
  • Also what would happen if I were to comment out other parameters such as "filters" in the js file? Would this new plupload still work? or do they need to be present? I believe these are my last questions! =) Thank you Leo – steve Kim Feb 17 '15 at 23:26
  • Steve, just make clear that we are not overriding the WP Plupload. It'll still working separately. And yeah, you can customise depends on your needs(yeah, the image size for example). If you'd like to remove filters and so on, than we must check if Plupload would work on their docs. plupload.com/docs/File-Filters – Leo Caseiro Feb 17 '15 at 23:44
  • I've just noticed that you want to resize the image before upload happens, I don't think is possible to do that. Plupload uses HTML5 to resize a preview image. It's not the upload image itself. It's on Client Side only: plupload.com/docs/Image-Resizing-on-Client-Side – Leo Caseiro Feb 17 '15 at 23:50
  • Please correct me if I am wrong. Since client side means mobile or Brower on the user's side, doesn't the document indicate that image can be resized before being uploaded? – steve Kim Feb 18 '15 at 1:06
2

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.

  • Nice! Works for me. – Kino Mar 5 '18 at 8:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.