Sometimes, we need to clear the thumbnails from dropzone.js after the file is uploaded. In this article, I will tell you how to do it.

You need to call addedfile function once the file is uploaded. After that, you have to to generate remove button for the thumbnail.

Look at this example code:

Step 1: 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) {

Step 2: Create the remove/clear button

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

Step 3: Capturing the Dropzone.js instance as closure

var _this = this;

Step 4: Listen to the click event

removeButton.addEventListener("click", function (e) {

Make sure the button click doesn't submit the form:

e.preventDefault();
e.stopPropagation();

Step 5: 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:

});

Step 6: Add the button to the file preview element

file.previewElement.appendChild(removeButton);
});
}
};

That's it! Simple right?

HostForLIFE.eu ASP.NET MVC 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.