JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<div id="drop-here"><input type="file" style="display: none;"></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');

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

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



function dropEvent(e) {
	e.preventDefault();
  //this.classList.remove('active-drop');
	console.log(e);
}