Drag & drop into dropper into file input

It's possible! In Chrome.

by Abhay Singh

HTML

<p><input type="file" multiple /></p>
<div class="dropper">Gimme files</div>

CSS

.dropper {
  padding: 50px;
  background: pink;
  color: white;
  border: dotted 10px transparent;
  font-size: 30px;
}
.dropper.over {
  border-color: #aaa;
}

JavaScript

var $file = document.querySelector('input[type=file]');
var $dropper = document.querySelector('.dropper');

$dropper.ondragover = function(e) {
  e.dataTransfer.dropEffect = 'copy';
  e.preventDefault();
  this.classList.add('over');
};
$dropper.ondragleave = function(e) {
  e.preventDefault();
  this.classList.remove('over');
  
};
$dropper.ondrop = function(e) {
  e.preventDefault();
  this.classList.remove('over');
  
  var files = e.dataTransfer.files;
  console.log('event files', files);
 	for(i =0; i < files.length; i++) {
   alert(files[i].name)
  }
  $file.files = files;
  console.log('input files', $file.files);
  if ($file.files[0] != files[0] || $file.files.length != files.length) {
    throw Error("Dragging files into an input[type=file] is not allowed.");
  }
};