How to call the .removeAllFiles() function in Dropzone.js after a click on a button

Question

I am using the http://www.dropzonejs.com/ (dropzone.js) library. I have initialized one of my form element as,

 var drop = $("#upload").dropzone({ uploadMultiple: "true", addRemoveLinks: "true", thumbnailWidth: "250", thumbnailHeight: "250", maxFilesize: "10", headers: { "title": titles, "location": locations, "tag": tags } });

Now when user clicks on a <button id="close"></button> button, I want to empty the whole list using the drop.removeAllFiles(true) function, as suggested on Dropzone.js official website.

So, I tried using

 $("#close").click(function(){ drop.removeAllFiles(true); });

But it's not working, In console.log I am getting the error removeAllFiles() is not declared for drop.

Where am I wrong?

yeah when I click on the "#close" button, I get "Uncaught TypeError: Object [object Object] has no method 'removeAllFiles' ". — rishy
– rishy, Commented Aug 27, 2013 at 12:40

Ducain · Accepted Answer · 2015-05-22 16:37:36Z

60

+50

This worked for me.

Dropzone.forElement("#YourDropBoxId").removeAllFiles(true);

Reference: https://github.com/enyo/dropzone/issues/180

answered May 22, 2015 at 16:37

Ducain

1,6013 gold badges19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dhara Over a year ago

Nice!! saved my time

stack reader Over a year ago

You sir, are my hero!

Dilip Kumar · Accepted Answer · 2013-09-06 06:12:07Z

Here is the code, it will solve your problem.

$(function() { Dropzone.options.myAwesomeDropzone = { init: function () { var myDropZone = this; $("#btnRemoveAll").click(function () { myDropZone.removeAllFiles(); } ); } }; });

Jasen · Accepted Answer · 2015-02-02 21:22:32Z

Your drop is referencing the jQuery object instead of the Dropzone object.

var drop = $("#upload").dropzone(options);

Sometimes it is necessary to use jQuery(selector [,context]) with dropzone. So the non-jquery constructor is not as convenient.

var drop = new Dropzone(selector, options);

Instead, you can get the Dropzone object with (the ugly):

var drop = $("#upload").dropzone(options).get(0).dropzone; $("#close").click(function(){ drop.removeAllFiles(true); });

Shareef · Accepted Answer · 2015-09-15 09:47:48Z

This is working...Please try this.

$("#close").click(function(){ drop.removeAllFiles(true); }); $("#upload").dropzone({ uploadMultiple: "true", addRemoveLinks: "true", thumbnailWidth: "250", thumbnailHeight: "250", maxFilesize: "10", headers: { "title": titles, "location": locations, "tag": tags }, init: function () { var dropzone = this; $("#close").click(function(){ dropzone.removeAllFiles(true); }); } });

spitz · Accepted Answer · 2014-08-20 22:30:47Z

Try this. This also includes JSON calls to the server for deleting the files.

mydropzone = new Dropzone("#mydropzone",{ url: "/dropzone", addRemoveLinks : true, maxFilesize: 2.0, dictResponseError: 'Error uploading file!', removedfile: function(file) { var name = {file: file.name} $.ajax({ type: 'POST', url: '/dropzone_delete', contentType: 'application/json', data: JSON.stringify(name), dataType: 'json', success: function (e) {console.log(e);} }); var _ref; return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0; } }); // Clear all files $("#btn_clear_dropzone").click(function () { // Delete existing files mydropzone.removeAllFiles(); // Cancel current uploads mydropzone.removeAllFiles(true); });

Please let me know if people have suggestions to further refine this code.

Saeid · Accepted Answer · 2023-07-23 06:57:04Z

Define a variable at the top of the scripts

var drpzone;

Assign this to the drpzone in init.

$("#upload").dropzone({ //your other options, init: function () { drpzone = this; } });

And use drpzone.removeAllFiles() in your custom event

$("#close").click(function(){ drpzone.removeAllFiles(); });

final code:

var drpzone; $("#upload").dropzone({ //your other options, init: function () { drpzone = this; } }); $("#close").click(function(){ drpzone.removeAllFiles(); });

It is better to have this operation inside $(document).ready().

Collectives™ on Stack Overflow

How to call the .removeAllFiles() function in Dropzone.js after a click on a button

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related