DropZone Replace image in init - javascript

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

Related

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

Dropzone.js 5.0 - use existing images and send the data to the server

I have successfully used Dropzone to display existing files from my server. However, when I submit the form, only new files are submitted to the server, so I don't know if the user has deleted any. Essentiall I want to send the data for all the files currently displayed, including the 'mocked' files and the newly uploaded ones.
I am using autoProcessQueue: false so that I can have a separate submit button to send the data to the server.
My Code:
Dropzone.options.createListingForm = {
autoProcessQueue: false,
uploadMultiple: true,
previewsContainer: '.create-listing-form-uploads',
parallelUploads: 100,
maxFiles: 100,
addRemoveLinks: true,
init: function () {
var thisDropzone = this;
var photos = form.data('photos');
$.each(photos, function (key, photo) {
var mockFile = {
name: photo.name,
size: photo.size,
type: photo.type,
accepted: true
};
thisDropzone.files.push(mockFile); // add to files array
thisDropzone.emit("addedfile", mockFile);
thisDropzone.emit("thumbnail", mockFile, photo.path);
thisDropzone.emit("complete", mockFile);
});
}
};
form.on('click', '.create-listing-form-save-photos', function () {
$('.dropzone').get(0).dropzone.processQueue();
return false;
});
Thanks to this answer for the first part of my code:
https://stackoverflow.com/a/45701181/5482719
Each time a file (including mock Files) is removed/deleted from the dropzone, the removedfile event is fired.
You could use this event to delete the removed file from your server as follows:
myDropzone.on("removedfile", function(file) {
// 'file' parameter contains the file object.
console.log('Removed File', file);
// Delete file from server
$.ajax({
type: 'POST',
url: 'url/that/handles/delete',
data: {
fileName: file.name,
},
dataType: 'json'
}).done(function (response) {
// check repsonse, notify user
}).fail(function(resp) {
console.log('xhr failed', resp);
}).always(function(resp) {
// do nothing for now
});
});
Hope that helps.

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 not validating maximum number of files

I am using dropzone for uploading files , I have set the file limitations upto maximum six files, this code is working if I upload one image at a time, but if I select more then six images by pressing control button at the start of uploading files then it does not validate the files and uploads all files. I am using laravel for backend, My code is:-
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 1, // MB
maxFiles: 6,
acceptedFiles: ".jpeg,.jpg,.png,.gif",
clickable: true,
init: function () {
this.on("success", function(file, responseText) {
file.previewTemplate.setAttribute('id',responseText[0].id);
});
this.on("thumbnail", function(file) {
if (file.width < 350 || file.height < 200) {
file.rejectDimensions()
}
else {
file.acceptDimensions();
}
});
},
accept: function(file, done) {
file.acceptDimensions = done;
file.rejectDimensions = function() { done("Image width or height should be greater than 350*200"); };
},
removedfile: function(file){
var name = file.name;
$.ajax({
type: 'POST',
url: ajax_url+'listing/deleteListingImage/'+name,
dataType: 'html'
});
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
},
dictDefaultMessage: "Drop your files to upload"
}
Thanks
You can remove the extra files using the method removeFile(file) when maxfilesexceeded is called.
Like this:
Dropzone.options.myAwesomeDropzone = {
maxFiles: 2,
autoProcessQueue: false,
init: function(){
var myDropZone = this;
myDropZone.on('maxfilesexceeded', function(file) {
myDropZone.removeFile(file);
});
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js"></script>
<form action="/file-upload"
class="dropzone"
id="my-awesome-dropzone">
</form>
http://output.jsbin.com/dodajij

Dropzone: Binding to init

I'm following this tutorial on mocking existing files to a Dropzone enabled form, but am having trouble hooking onto the init function. Here's what I have so far:
var imageUpload;
if ($('.js-listing__images-upload').length) {
imageUpload = new Dropzone('.js-listing__images-upload', {
addRemoveLinks: true,
maxFiles: 5,
maxFilesize: 3,
acceptedFiles: 'image/jpeg,image/png,image/gif'
});
imageUpload.on('init', function() {
var listingID, thisDropzone;
console.log('dropzone init');
thisDropzone = this;
listingID = $('#manage-images').data('listing');
$.ajax({
url: dashboard.images.list,
data: {
listing: listingID
},
success: function(data) {
console.log('ajax for list done');
$.each(data, function(key, value) {
var mockFile;
mockFile = {
name: value.name,
size: value.size
};
thisDropzone.options.addedfile.call(thisDropzone, mockFile);
thisDropzone.options.thumbnail.call(thisDropzone, mockFile, '/uploads/thumb/listings/' + value.name);
});
}
});
});
}
None of my console.log() fire, but I'm unsure as to what the issue could be. Following Dropzone's config, I should be able to hook onto events using simple on mechanisms. Thanks all!
Update
The following does work:
# When images are removed
# Dropzone
imageUpload.on 'removedfile', (file) ->
if file.xhr
imageID = JSON.parse file.xhr.response
$.ajax
url: dashboard.images.destroy
data: { image: imageID }
success: () ->
return
So it's something about the init function that I'm having trouble with.
The init function can be binded directly to your new Dropzone instantiation:
if $('.js-listing__images-upload').length
imageUpload = new Dropzone(
'.js-listing__images-upload',
addRemoveLinks: true
maxFiles: 5
maxFilesize: 3
acceptedFiles: 'image/jpeg,image/png,image/gif'
init: ->
thisDropzone = this
$.ajax
url: dashboard.images.list
data: { listing: $('#manage-images').data('listing') }
success: (data) ->
$.each data, (key, value) ->
mockFile =
name: value.name
size: value.size
thisDropzone.options.addedfile.call thisDropzone, mockFile
thisDropzone.options.thumbnail.call thisDropzone, mockFile, '/uploads/thumb/listings/' + value.name
return
return
return
)

Categories