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