DropZone Pure JS Basic Functions

by Matthew Schenker

HTML

<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
<form id="upload" enctype="multipart/form-data">
  <input type="text" name="name" value="somename">
  <input type="checkbox" name="terms_agreed">
  <div id="previewsContainer" class="dropzone">
    <div class="dz-default dz-message">
      <button class="dz-button" type="button">
        Drop files here to upload
      </button>
    </div>
  </div>
  <input id="dz-submit" type="submit" value="submit">
</form>

JavaScript

Dropzone.autoDiscover = false;
  new Dropzone("#upload", {
    clickable: ".dropzone",
    url: "upload.php",
    previewsContainer: "#previewsContainer",
    uploadMultiple: true,
    autoProcessQueue: false,
    init() {
      var myDropzone = this;
      this.element.querySelector("[type=submit]").addEventListener("click", function(e) {
        e.preventDefault();
        e.stopPropagation();
        myDropzone.processQueue();
      });
    }
  });