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.