Drag & Drop File Upload

by kaliatech

HTML

<div id="drop_zone"
     ondrop="onDrop(event);"
     ondragover="event.preventDefault();" >
  <p>Drag one or more files to this Drop Zone ...</p>
</div>

CSS

#drop_zone {
  margin: 1rem;
  border: 1px solid black;
  width:20rem;
  height:10rem;
}

JavaScript

function getEntries(reader) {
    return new Promise((resolve, reject) => {
        reader.readEntries((entries) => resolve(entries))
    })
}

async function onDrop(e) {
    e.preventDefault();
    var items = e.dataTransfer.items;
    for (var i=0; i<items.length; i++) {
        
        var entry = items[i].webkitGetAsEntry();
        if (entry.isDirectory) {
            var reader = entry.createReader();
            console.log("BEFORE, items.length", items.length);
            var entries = await getEntries(reader);
            console.log("AFTER, items.length", items.length);
            console.log(entries);
        }
    }
}