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