Removing thumbnails from dropzone js – Part 2

17 Jul

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


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:
// Remove the file preview.
// 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.

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 *