We Keep Coding

How to change image upload order in Dropzone.js

I'm using Dropzone.js for my project image uploading. I need to upload images by rearranging the order. I have used .sortable() method rearrange the image order. But when I click upload button images upload according to the image size (low MB files first). How can I send the images according to my arranged order. Here is my code.
var dropzone = new Dropzone('#vehiImgUpload', {
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
previewTemplate: document.querySelector('#preview-template').innerHTML,
dictDefaultMessage:'Drop files here or Click to Upload',
uploadMultiple: true,
parallelUploads: 50,
thumbnailHeight: 120,
thumbnailWidth: 120,
maxFilesize: 8,
timeout: 180000,
filesizeBase: 1024,
addRemoveLinks: true,
maxFiles: 50,
autoProcessQueue: false,
removedfile: function(file) {
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
},
thumbnail: function(file, dataUrl) {
if (file.previewElement) {
file.previewElement.classList.remove("dz-file-preview");
var images = file.previewElement.querySelectorAll("[data-dz-thumbnail]");
for (var i = 0; i < images.length; i++) {
var thumbnailElement = images[i];
thumbnailElement.alt = file.name;
thumbnailElement.src = dataUrl;
}
setTimeout(function() { file.previewElement.classList.add("dz-image-preview"); }, 1);
}
},
init: function () {
$('#vehicleAddBtn').on('click',function(e) {
e.preventDefault();
if (dropzone.getQueuedFiles().length > 0) {
dropzone.processQueue();
}
else {
// Upload anyway without files
var blob = new Blob();
blob.upload = { 'chunked': dropzone.defaultOptions.chunking };
dropzone.uploadFile(blob);
}
});
this.on('success', function(file, response) {
alert('success')
this.removeAllFiles();
});
}
});

Dynamically append Dropzone image upload fields

In my application I have added image upload fields dynamically using jquery append
So I use dropzone js and it not work when it append because it not initialize in document load.
So how could I load that dynamically
$(add_button).click(function(e){
$(wrapper).append(
'<div class="dropzone small-dropzone feedDropZone">' +
'<div class="dz-message" data-dz-message><p>Drop image or click to select</p></div></div>');
}
});
Dropzone code is
$('#add').on('click', '.feedDropZone', function(){
// do something here
Dropzone.autoDiscover = false;
var minImageWidth = 800, minImageHeight = 600;
$(this).dropzone({
url: base_url + "admin/feed/upload",
maxFiles: 1,
maxFilesize: 5,
acceptedFiles: ".jpeg,.jpg",
addRemoveLinks: true,
maxfilesexceeded: function (file) {
},
createImageThumbnails: true,
success: function (file, response) {
imgObject = JSON.parse(response);
},
error: function (file, response) {
},
init: function () {
this.on("thumbnail", function (file) {
if (file.width < minImageWidth || file.height < minImageHeight) {
file.rejectDimensions();
}else if(file.size/(1024*1024) > 5){
file.rejectFilesize();
}
else {
file.acceptDimensions();
}
});
}
});
});
I'm getting below error:
Error: No URL provided.
throw new Error("No URL provided.");

Dropzone.js getting image for Preview

I'm trying to get the real image that is queued in the Dropzone and show a preview, but the only image i can get is the one of the thumbnail, is there a way to get the real image?
here is my code:
var uploadDrop = new Dropzone("#my-awesome-dropzone", {
acceptedFiles: "image/png",
url: "${g.createLink(controller:'perfil',action: 'saveFile')}",
maxFiles: 1, // Number of files at a time
maxFilesize: 1, //in MB
autoProcessQueue: false,
maxfilesexceeded: function(file){
alert('You have uploaded more than 1 Image. Only the first file will be uploaded!');
},
init: function(){
this.on("addedfile", function() {
if (this.files[1]!=null){
this.removeFile(this.files[0]);
}
});
},
thumbnail: function(file, dataUrl) {
// Display the image in your file.previewElement
$(file.previewElement).removeClass("dz-file-preview").addClass("dz-image-preview");
$(file.previewElement).find(".dz-image img").attr("src",dataUrl);
$("#preview").attr("src",dataUrl);
},
success: function (response) {
var x = JSON.parse(response.xhr.responseText);
var message=x.data.message;
if (message.pass) {
originalLogoName=x.data.data.logoName
pasoPorSubida=true;
simpleMessage(message.title, message.body, "success");
this.removeAllFiles(); // This removes all files after upload to reset dropzone for next upload
} else {
simpleMessage(message.title, message.body, "error");
}
},
addRemoveLinks: true,
removedfile: function(file) {
var _ref; // Remove file on clicking the 'Remove file' button
if(!success){
$("#preview").attr("src",originalLogoUrl+"/"+originalLogoName);
}else{
success=false;
}
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
}
});

Dropzone - How to remove files?

how can I remove the uploaded files and previewed thumbnails? That´s my code.
The alert works, but the thumbs are not hiding.
new Dropzone("form#galerie", {
url: "/business/kleinanzeigen/upload",
maxFilesize: 5,
maxFiles: 10,
acceptedFiles: '.png, .gif, .jpg',
complete: function (success) {
vm.form.galerie.push(JSON.parse(success.xhr.response))
},
addRemoveLinks: true,
removedfile: function (file) {
//console.log(file);
alert('works');
this.removeFile(file);
}
}
);

Your removedFile function doesn't seem right. It should be something like this:
removedfile: function(f) {
var reference;
return (reference = f.previewElement) != null ? reference.parentNode.removeChild(f.previewElement) : void 0;
}

DropZone Replace image in init

I used this code to upload image from database in init. Now I want when upload a new image to remove this initial image.
var o = $("div#uploader").dropzone({
url: "../../Merchant/UploadLogo",
paramName: "logo",
maxFiles: 1,
//enqueueForUpload: false,
maxfilesexceeded: function (file) {
this.removeAllFiles();
this.addFile(file);
},
addRemoveLinks: true,
uploadMultiple: false,
dictRemoveFile: "حذف",
removedfile: function(file) {
RemoveFile("Logo");
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
},
init: function() {
var mockFile = { name: "avatar1.jpg", size: 12345, type: 'image/jpeg', url: "../../Merchant/GetLogo" };
this.options.addedfile.call(this, mockFile);
this.options.thumbnail.call(this, mockFile, mockFile.url);//uploadsfolder is the folder where you have all those uploaded files
}
});

I'm assuming you want to replace the old image in the Dropzone whenever a new Image is successfully uploaded. You can do that by combining the this.on('success') and this.removeFile methods provided by Dropzone:
Dropzone.options.myDropzone = {
init: function() {
this.on('success', function(file, message) {
if (this.files.length > 1) {
this.removeFile(this.files[0]);
}
});
// ...
}
};
For this to work, your mockFile must also be registered as one of the files of your Dropzone. To do that, you can push it into the this.files array in your init, right after displaying it:
// Create and Display Mock File
var mockFile = { name: "avatar1.jpg", size: 12345, url: '/image.png' };
this.options.addedfile.call(this, mockFile);
this.options.thumbnail.call(this, mockFile, mockFile.url);
// Register it
this.files = [mockFile];
Source:
Dropzone#SuccessEvent,
Dropzone#Methods and Experience