Setting input.files from drop event

by Felipe Alfaro

HTML

<p><input type="file" multiple/></p>

<div id="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;
}

JavaScript

var dropzone = document.getElementById('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');
  input.files = e.dataTransfer.files;
});