JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">

    <title>test</title>

  </head>

  <body>
    <div id="dropTarget">Drag and drop a folder here</div>
  </body>

</html>

CSS

#dropTarget {
  padding: 1em;
  color: white;
  background: red;
}

JavaScript

const target = document.getElementById('dropTarget');
let itemList = [];

target.ondragover = function(evt) {
  evt.preventDefault();
}

target.ondrop = function(e) {
  e.preventDefault();

  let items = e.dataTransfer.items;

  function scanFiles(item, index) {
    return new Promise(function(resolve) {
      if (item.isFile) {
				itemList.push(item.fullPath);
          resolve();
      } else if (item.isDirectory) {
        let directoryReader = item.createReader();

        directoryReader.readEntries(function(entries) {
          Promise.all(entries.map(scanFiles)).then(resolve);
        });
      }
    })
  }

  var p = Promise.all(Array.from(items, item => scanFiles(item.webkitGetAsEntry())));
  p.then(function() {
    //console.log(itemList);
    Object.keys(itemList).forEach(function(key) {
      console.log(key, itemList[key]);
    });
  })
}