Dropzone Fiddle Extra

Drag and Drop example of the dropzone.js library with Extra's

by Faisal Pathan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/basic.css">
<form action="" class="dropzone" id="DropZoneFiddle">
<span class="glyphicon glyphicon-download">

  </span>
  <br/>
</form>

CSS

.dropzone {
  text-align: center;
  font-size: 18px;
}

.glyphicon-download {
  font-size: 1.5em;
}

#DropZoneFiddle {
  cursor: pointer;
  border: 1px solid #000;
  padding: 30px 0;
}

JavaScript

Dropzone.options.DropZoneFiddle = {
  url: this.location,
  paramName: "file", //the parameter name containing the uploaded file
  clickable: true,
  maxFilesize: 1, //in mb
  uploadMultiple: true, 
  maxFiles: 10, // allowing any more than this will stress a basic php/mysql stack
  addRemoveLinks: true,
  acceptedFiles: '.png,.jpg', //allowed filetypes
  dictDefaultMessage: "Upload your files here", //override the default text
  init: function() {
    this.on("sending", function(file, xhr, formData) {
      formData.append("step", "upload"); // Append all the additional input data of your form here!
      formData.append("id", "1"); // Append all the additional input data of your form here!
    });
    this.on("success", function(file, responseText) {
      //auto remove buttons after upload
      $("#div-files").html(responseText);
      var _this = this;
      _this.removeFile(file);
    });
  }
};