Skip to content

Remove all files with one button

Jump to bottom
Matias Meno edited this page Jul 27, 2020 · 7 revisions

This tutorial shows you how to create a button that will remove all files from a dropzone.

<form id="my-dropzone" action="/target-url" class="dropzone"></form>

<button id="clear-dropzone">Clear Dropzone</button>

<script language="javascript">

  // myDropzone is the configuration for the element that has an id attribute
  // with the value my-dropzone or myDropzone
  Dropzone.options.myDropzone = {
    init: function() {
      this.on("sending", function(file) {
        alert('Sending the file' +  file.name)
      });

      // Using a closure.
      var _this = this;

      // Setup the observer for the button.
      document.querySelector("button#clear-dropzone").addEventObserver("click", function() {
        // Using "_this" here, because "this" doesn't point to the dropzone anymore
        _this.removeAllFiles();
        // If you want to cancel uploads as well, you
        // could also call _this.removeAllFiles(true);
      });
    }
  };

</script>

Thanks to @trinione

Clone this wiki locally