I'm stuck with that problem and tried many things like : How to integrate Dropzonejs with wordpress media handler in frontend?
But I can't find the answer anywhere so here's the question :
I'm making a custom plugin in wordpress to allow crop/resize/optimize inside the media library (upload.php).
PHP
<?php
/*
Plugin name: Waouh_pictures
Description: bla bla bla
Version: 1.0
Author: Waouh
*/
if(!defined('ABSPATH'))
exit;
class plugin{
public function __construct(){
/* Adding script and style */
function add_custom_script_admin() {
wp_enqueue_script('croppie_script', '/wp-content/plugins/waouh_pictures/js/croppie.js', array('jquery'), false);
wp_enqueue_script('dropzone_pictures_script', '/wp-content/plugins/waouh_pictures/js/dropzone.js', array('jquery'), false);
wp_enqueue_script('waouh_pictures_script', '/wp-content/plugins/waouh_pictures/js/waouh_pictures.js', array('jquery'), false);
wp_enqueue_style('croppie_style', '/wp-content/plugins/waouh_pictures/css/croppie.css');
wp_enqueue_style('dropzone_style', '/wp-content/plugins/waouh_pictures/css/dropzone.css');
wp_enqueue_style('waouh_pictures_style', '/wp-content/plugins/waouh_pictures/css/waouh_pictures.css');
$data = array(
'upload_url' => admin_url('async-upload.php'),
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('media-form')
);
wp_localize_script( 'waouh_pictures_script', 'su_config', $data );
}
add_action( 'admin_enqueue_scripts', 'add_custom_script_admin' );
/* Removing wordpress thumbnails */
function remove_default_image_sizes( $sizes ) {
unset( $sizes[ 'thumbnail' ]);
unset( $sizes[ 'medium' ]);
unset( $sizes[ 'medium_large' ]);
unset( $sizes[ 'large' ]);
unset($sizes[ '1536x960' ]);
return $sizes;
}
add_filter( 'intermediate_image_sizes_advanced', 'remove_default_image_sizes', 99 );
}
}
new plugin();
?>
JavaScript
jQuery(document).ready(function($){
// Replacement of the original wordpress button by my custom form
$("#wp-media-grid > a").after("<form action=\"\" method=\"post\" class=\"image-form dropzone\"><input type=\"file\" id=\"button_upload_waouh\" name=\"async-upload\" class=\"image-file\" accept=\"image/*\" required><input type=\"hidden\" id=\"imagebase64\" name=\"imagebase64\"><input id=\"submit_button\" type=\"submit\" value=\"Valider\"></form>");
$("#wp-media-grid > a").hide();
$("#button_upload_waouh").after("<div id=\"upload-demo\"></div>");
// Hidding image preview when there is no image selected
$("#upload-demo").hide();
Dropzone.autoDiscover = false;
// Adding croppie to crop/resize image
demoUpload();
function demoUpload() {
var $uploadCrop;
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#upload-demo').addClass('ready');
$uploadCrop.croppie('bind', {
url: e.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(input.files[0]);
}
else {
swal("Sorry - you're browser doesn't support the FileReader API");
}
}
// Parameters of croppie
$uploadCrop = $('#upload-demo').croppie({
viewport: {
width: 200,
height: 200,
type: 'circle'
},
boundary: {
width: 300,
height: 300
},
enableExif: true
});
// Function to convert Base64 into File
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
// Preview the selected image on change
$('#button_upload_waouh').on('change', function () { readFile(this); });
// Show the preview on click
$('#button_upload_waouh').on('click', function(){ $("#upload-demo").show(); });
// When the form is submit by the user
$('#submit_button').on('click', function (ev) {
// Calling ajax
ev.preventDefault();
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'original',
format: 'png'
}).then(function (resp) {
// resp is in base64 type so I keep the name and convert it to file type
var base_name = resp.split(';')[0];
var mime = base_name.split('/')[1];
var filename = "image." + mime;
var $imgForm = $('.image-form');
var $imgFile = dataURLtoFile(resp, filename);
var $imgId = $imgForm.find('[name="image_id"]');
var $submit = $('#submit_button');
// Creating formData to submit data (calling ajax and wordpress admin php)
var formData = new FormData();
formData.append('action', 'upload-attachment');
formData.append('async-upload', $imgFile);
formData.append('name', $imgFile.name);
formData.append('_wpnonce', su_config.nonce);
// Ajax request
$.ajax({
url: su_config.upload_url, // http://yoursite.com/wp-admin/async-upload.php
data: formData, // Our formData with all data
processData: false,
contentType: false,
dataType: 'json',
type: 'POST',
success: function(result) {
console.log(result); // Showing in console the result
}
});
$("#upload-demo").hide();
});
});
}
});
I also have a css stylesheet but there's nothing on it actually.
This code is working and I can crop image thank to croppie and upload it to my media library.
My problem is that most admins use "drag and drop" functionality.
This drag and drop is made by wordpress and cover the entire body.
And when I add my dropzone, I can't drop file in it because of wordpress dropzone.
I don't want to resize the body and I want to be allowed to make my dropzone works inside the body.
Any suggestions or answers ?
Thanks you.
