Setting input.files from drop event

by Felipe Alfaro

HTML

<div class="dropzone">Drop files here</div>

CSS

.dropzone {
  max-width: 500px;
  height: 100px;
  border: dotted 3px #ccc;
  margin-right: 30px;
}
.dropzone.over {
  background: #ddd;
  border-color: #000;
}
.log::before {
  content: "Log: ";
}

JavaScript

var dropzone = document.querySelector('.dropzone');



dropzone.addEventListener('dragover', function(e) {
  e.preventDefault();
  this.classList.add('over');
});
dropzone.addEventListener('dragleave', function(e) {
  e.preventDefault();
  this.classList.remove('over');
});
dropzone.addEventListener('drop', function(e) {
  e.preventDefault();
  this.classList.remove('over');
  console.log(e.dataTransfer.files);
});