JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<div id="dropzone" ondragover="handleDragOver(event)" ondrop="handleDrop(event)"></div>

CSS

#dropzone {
            width: 100vw;
            height: 100vh;
        }

JavaScript

let files = [];

function handleDragOver(event) {
  event.preventDefault();
}

async function handleDrop(event) {
  event.preventDefault();
  files = [];

  const dataTransferItems = Object.keys(event.dataTransfer.items);

  await Promise.all(dataTransferItems.map(async (key) => {
    const item = event.dataTransfer.items[key];
    const entry = item.webkitGetAsEntry();

    if (!entry) return;

    if (entry.isFile) {
      files.push(entry.fullPath);
    } else if (entry.isDirectory) {
      const directoryReader = entry.createReader();
      await walkDirRecursively(entry.fullPath, directoryReader);
    }
  }));

  console.log(files.length, files);

}

function walkDirRecursively(path, directoryReader) {
  return new Promise(async (resolve, reject) => {
    directoryReader.readEntries(async (entries) => {
      await Promise.all(entries.map(async (entry) => {
        if (entry.isFile) {
          const newPath = path + "/" + entry.name;
          files.push(newPath);
        } else if (entry.isDirectory) {
          const newPath = path + "/" + entry.name;
          const newDirectoryReader = entry.createReader();
          await walkDirRecursively(newPath, newDirectoryReader);
        }
      }));
      resolve();
    });
  });
}