Setting input.files from drop event

by Felipe Alfaro

HTML

<p style="display: none;"><input type="file" multiple /></p>

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

<p class="log"></p>

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');
var input = document.querySelector('input');
var log = document.querySelector('.log');

/* input.addEventListener('change', function(e) {
  log.textContent = `Selected ${this.files.length} files...`;
}); */

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;
});