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?

Answer 1

This worked for me.

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

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

Answer 2

Here is the code, it will solve your problem.

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

        };
 });