JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<div id="drop-here">
  <input type="file" multiple />
</div>

CSS

#drop-here {
  background: gainsboro;
  width: 400px;
  height: 220px;
  margin: 15px auto;
  border: solid 1px gray;
}

#drop-here.active-drop {
  border-color: cyan;
}

JavaScript

var dropArea = document.getElementById('drop-here');

dropzone.addEventListener('dragover', dragOverEvent);
dropArea.addEventListener('drop', dropEvent);

function dropEvent(e) {
	e.preventDefault();
	console.log(e);
}


function dragOverEvent(e) {
  e.preventDefault();
  this.classList.add('active-drop');
});