1

I'm trying to add image from front end and crop it after upload.

Used setState( 'cropper' ); to enable image crop window.

It open the image upload window. Upload an image. But, Not open Image Crop window.

Reference from https://core.trac.wordpress.org/browser/tags/4.6/src/wp-admin/js/customize-controls.js#L2449

Add Shortcode: [frontend-image-upload]

function frontend_image_upload() {
    wp_enqueue_media();
    wp_enqueue_script( 'media-grid' );
    wp_enqueue_script( 'media' );
    wp_enqueue_script( 'frontend-image-upload', plugins_url( '../assets/js/frontend-image-upload.js', __FILE__ ), array( 'jquery', 'media-upload' ), NULL, true);
}

add_action( 'wp_enqueue_scripts', 'frontend_image_upload' );


add_shortcode('frontend-image-upload', function() {

    ob_start();
    ?>

    <button class="frontend-image-upload">File Open</button>

    <?php

    return ob_get_clean();
} );

File: frontend-image-upload.js

jQuery(document).ready(function($) {

    jQuery('.frontend-image-upload').click(function(event) {
        event.preventDefault();

        var uploader = wp.media({
            title: 'Select or Upload Image',
            button: {
                text: 'Choose Image'
            },
            library: {
                type: 'image'
            },
            multiple: false,
        });
        uploader.on('select', function(){

            var attachment = uploader.state().get( 'selection' ).first().toJSON();
            console.log('attachment.url: ' + attachment.url);

            // EXPECT IT OPEN THE IMAGE CROP WINDOW!!!
            // BUT, NOT WORKING NOW!!!
            uploader.setState( 'cropper' );
        });

        /*uploader.on('cropped', function(attachment){
            uploader.params.attachment = attachment;
            uploader.setting( attachment.id );
        });

        uploader.on('skippedcrop', function(selection){
            var url = selection.get('url'),
                    w = selection.get('width'),
                    h = selection.get('height');
            uploader.setImageFromURL(url, selection.id, w, h);
        });*/

        uploader.open();

    });
});

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.