JSFiddle - React, Tailwind, and code Playground

HTML

<script>
    var entered = 0;
</script>

<body ondragenter="entered++;document.getElementById('uploadelement').style.display='block'" ondragleave="entered--;if (!entered) document.getElementById('uploadelement').style.display='none'">
  <form method="post" enctype="multipart/form-data" id="uploadform">
    Things can be dragged and dropped here!
      <input type="text" id="fileName"/>
    <input type="file" id="uploadelement" name="dragupload[]" 
      onchange="if (this.value) { document.getElementById('fileName').value = this.value.replace(/^C:\\fakepath\\/i, ''); }" style="display:none;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;" />
  </form>
</body>