JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        #dropzone {
            width: 100vw;
            height: 100vh;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div id="dropzone" ondragover="handleDragOver(event)" ondrop="handleDrop(event)"></div>
    
    <script>
        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((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();
                    return walkDirRecursively(entry.fullPath, directoryReader);
                }
            }));

            console.log(files);

        }

        function walkDirRecursively(path, directoryReader) {
            return new Promise((resolve, reject) => {
                directoryReader.readEntries((entries) => {
                    Promise.all(entries.map((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();
                            return...