JSFiddle - React, Tailwind, and code Playground

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

function makeElementImageDroppable(el) {
  el.addEventListener('dragover', eventDragOver);
  el.addEventListener('dragleave', eventDragLeave);
  el.addEventListener('drop', eventDrop);
}

function eventDragOver(e) {
  e.preventDefault();
  this.classList.add('over');
}

function eventDragLeave(e) {
  e.preventDefault();
  this.classList.remove('over');
}

function eventDrop(e) {
  e.preventDefault();
  this.classList.remove('over');
  
  Array.prototype.forEach.call(e.dataTransfer.files, function (file) {
  	console.log(file.type, file.name);
  });
}



makeElementImageDroppable(document.querySelector('.dropzone'));