17 Jul

Removing thumbnails from dropzone js – Part 2

In this article we will learn how to removing thumbnails from dropzone js after file is uploaded. This is continuation of the previous articles

File upload part 1: File upload in ASP.NET MVC using Dropzone JS and HTML5

File upload part 2: Limit Number of files upload using Dropzonejs Options – Part 1

Implementation

We need to call addedfile function once the file is uploaded. In there we need to generate remove button for the thumbnail.

//File Upload response from the server
Dropzone.options.dropzoneForm = {
maxFiles: 2,
init: function () {
this.on("maxfilesexceeded", function (data) {
var res = eval('(' + data.xhr.responseText + ')');

});
this.on("addedfile", function (file) {

// Create the remove button
var removeButton = Dropzone.createElement("
<button>Remove file</button>
");

// Capture the Dropzone instance as closure.
var _this = this;

// Listen to the click event
removeButton.addEventListener("click", function (e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
// Remove the file preview.
_this.removeFile(file);
// If you want to the delete the file on the server as well,
// you can do the AJAX request here.
});

// Add the button to the file preview element.
file.previewElement.appendChild(removeButton);
});
}
};

Source Code

You can download the source from the Github

2 thoughts on “Removing thumbnails from dropzone js – Part 2

  1. I’m uploading my image after I’m Changing my image name on server
    and I can’t take name the changing image, How can I get the name changed image ? For Remove !

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>