JSFiddle - React, Tailwind, and code Playground

HTML

<div id="file-drop" style="border:1px dashed black; height:300px; width:300px;">Drop files here!</div>

JavaScript

var file_drop = document.getElementById('file-drop');
  file_drop.addEventListener(
    'dragover',
    function handleDragOver(evt) {
      evt.stopPropagation();
      evt.preventDefault();
      evt.dataTransfer.dropEffect = 'copy'
    },
    false
  )
  file_drop.addEventListener(
    'drop',
    function(evt) {
      evt.stopPropagation()
      evt.preventDefault()
      var files = evt.dataTransfer.files  // FileList object.
      var file = files[0]                  // File     object.
      alert(file.name)
    },
    false
  )