dropzone

dropzone

by kzoon

HTML

<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<head>


</head>


<div id="myDropDiv" style="height:100px;background-color:lightblue">my drop zone

</div>
<button id="testButton1" type="button">report</button>
<div id="myResults" style="height:600px;" ">

</div>

JavaScript

//Dropzone.autoDiscover = false;

var myDropDiv = document.getElementById("myDropDiv");
var myResults = document.getElementById("myResults");
var myButton1 = document.getElementById("testButton1");

var dropZone = new Dropzone(myDropDiv, {
  url: "dummy",
  createImageThumbnails: false,
  previewsContainer: false,
  autoQueue: false,
  autoProcessQueue: false
});
// //previewsContainer: false
dropZone.on("addedfile", function(file) {

  myResults.innerHTML += "Loaded " + file.name + " <br/>"
});

dropZone.on("addedfiles", function(files) {
  //AddedFiles is called too soon, hence the setTimeout
  setTimeout(function() {
    myResults.innerHTML += "added files Total files loaded: " + dropZone.files.length + "  <br/>"
  }, 1000);

});
myButton1.onclick = function() {
  var files = dropZone.files;
  myResults.innerHTML += files.length + ' files loaded <br/>';
};

dropZone.on("drop", function(event) {

  myResults.innerHTML += "Drop  <br/>"
});
dropZone.on("queuecomplete", function(event) {

  myResults.innerHTML += "queuecomplete <br/>"
});
dropZone.on("error", function(msg) {

  myResults.innerHTML += "error: " + msg + "<br/>"
});