Untitled

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div id="droparea" style="height: 50px; background: #f60;">
    Drop here
</div>

<script>

    var el = document.getElementById("droparea");

    var fn = function (e) {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'copy';
        return false;
    };

    el.addEventListener("dragenter", fn, true);
    el.addEventListener("dragover", fn,true);

    el.addEventListener("drop", function (e) {
        e.stopPropagation();
        e.preventDefault();

        var traverseFileTree = function (item, path) {
            path = path || "";
            if (item.isFile) {
                // Get file
                item.file(function(file) {
                    console.log("everything is fine");
                }.bind(this), function (e) {
                    console.log(e);
                });
            } else if (item.isDirectory) {
                // Get folder contents
                var dirReader = item.createReader();
                dirReader.readEntries(function(entries) {
                    for (var i=0; i<entries.length; i++) {
                        traverseFileTree(entries[i], path + item.name + "/");
                    }
                });
            }
        };

        for (var i=0; i<e.dataTransfer.items.length; i++) {
            var item = e.dataTransfer.items[i].webkitGetAsEntry();
            if (item) {
                traverseFileTree(item);
            }
        }

    }, true);

</script>

</body>
</html>