JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Improved Example</h1>
<p>Drag files and/or directories to the box below!</p>

<div id="dropzone">
    <div id="boxtitle">
        Drop Files Here
    </div>
</div>

<h2>Directory tree:</h2>

<ul id="listing">
</ul>

CSS

#dropzone {
            text-align: center;
            width: 300px;
            height: 100px;
            margin: 10px;
            padding: 10px;
            border: 4px dashed green;
            border-radius: 10px;
        }

        #boxtitle {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            color: black;
            font: bold 2em "Arial", sans-serif;
            width: 300px;
            height: 100px;
        }

        body {
            font: 14px "Arial", sans-serif;
        }

JavaScript

var dropzone = document.getElementById("dropzone");
    var listing = document.getElementById("listing");

    function scanFiles(item, container) {
        var elem = document.createElement("li");
        elem.innerHTML = item.name;
        container.appendChild(elem);

        if (item.isDirectory) {
            var directoryReader = item.createReader();
            var directoryContainer = document.createElement("ol");
            container.appendChild(directoryContainer);

            var fnReadEntries = (function () {
                return function (entries) {
                    entries.forEach(function (entry) {
                        scanFiles(entry, directoryContainer);
                    });
                    if (entries.length > 0) {
                        directoryReader.readEntries(fnReadEntries);
                    }
                };
            })();

            directoryReader.readEntries(fnReadEntries);
        }
    }

    dropzone.addEventListener("dragover", function (event) {
        event.preventDefault();
    }, false);

    dropzone.addEventListener("drop", function (event) {
        var items = event.dataTransfer.items;

        event.preventDefault();
        listing.innerHTML = "";

        for (var i = 0; i < items.length; i++) {
            var item = items[i].webkitGetAsEntry();

            if (item) {
                scanFiles(item, listing);
            }
        }
    }, false);