Example

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/webkitGetAsEntry -->

<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 red;
    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

let dropzone = document.getElementById("dropzone");

var readEntriesPromise = function() {
    return new Promise((resolve, reject) => this.readEntries(resolve, reject));
};

function traverseFileTree(item, path, connection_time) {
    path = path || "";
    if (item.isDirectory) {
        var dirReader = item.createReader();
        dirReader.readEntriesPromise = readEntriesPromise;
        return dirReader.readEntriesPromise()
            .then(entries => entries.filter(entry => entry.isDirectory))
            .then(dirs => Promise.all(dirs.map(entry => traverseFileTree(entry, path + item.name + "/", connection_time))))
            .then(result => [].concat.apply([path + item.name], result));
    } else {
        return Promise.resolve("NO FOLDER"); // initial item was not a folder
    }
}

function call_when_drop(e, element) {
    var items = e.dataTransfer.items;
    [].filter.call(items, item => item.kind == 'file')
        .forEach(file => traverseFileTree(file.webkitGetAsEntry(), "")
            .then(function(results) {
                console.log(results);
            })
        )
}

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