I have a page where I am successfully uploading multiple images using Dropzone.js but i want visitors to crop them as per their choice before upload. I am able to use cropper.js separately but failed to integrate them together.
Here is my original working code extract.
HTML:
<div class="dropzone dz-clickable" id="myDrop">
<div class="dz-default dz-message" data-dz-message="">
<span>No Photo Selected</span>
</div>
</div>
<div id="add_file">POST</div>
JS:
//Dropzone script
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#myDrop",
{
paramName: "__files", // The name that will be used to transfer the file
addRemoveLinks: true,
uploadMultiple: true,
withCredentials: true,
autoProcessQueue: false,
parallelUploads: 5,
maxFiles: 5,
maxFilesize: 20, // MB
acceptedFiles: ".png, .jpeg, .jpg, .gif, .JPG, .jfif",
url: "sdk/process-upload.php",
capture: "camera",
init: function () {
this.on('sending', function(file, xhr, formData) {
$("#shadow2").show();
// Append all form inputs to the formData Dropzone will POST
var l = document.getElementById("locationval").value;
formData.append('location', l);
var x = document.getElementById("postmaker").innerText;
formData.append('pdata', x);
});
}
});
/* Add Files Script*/
myDropzone.on("success", function(file, message){
$("#msg").html(message);
//setTimeout(function(){window.location.href="index.php"},800);
});
myDropzone.on("error", function (data) {
$("#msg").html('<div class="alert alert-danger">There is some thing wrong, Please try again!</div>');
});
myDropzone.on("complete", function(file) {
myDropzone.removeFile(file);
});
$("#add_file").on("click",function (){
myDropzone.processQueue();
});
I want my users to upload all the images cropped in same dimension. If multiple is not possible at lease please help me with one image.
Note: I am not using bootstrap