<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
    font-family: -apple-system;
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 1em;
}

#droparea {
    margin-top: 1em;
    width: 100%;
    height: 200px;
    top: 0;
    left: 0;
}

#output {
    width: 100%;
    height: calc(100% - 200px);
    font-family: monospace;
}
</style>

<div id="droparea">
    <div>To manually test, drop something into this area and observe the output below.</div>
</div>
<textarea id="output"></textarea>

<script>
    function getChildEntries(entry) {
        if (!entry.isDirectory)
            return Promise.resolve([]);

        return new Promise((resolve, reject) => {
            let result = [];
            let reader = entry.createReader();
            let doBatch = () => {
                reader.readEntries(entries => {
                    if (entries.length > 0) {
                        entries.forEach(e => result.push(e));
                        doBatch();
                    } else
                        resolve(result);
                }, reject);
            };
            doBatch();
        });
    }

    droparea.addEventListener("dragenter", event => event.preventDefault());
    droparea.addEventListener("dragover", event => event.preventDefault());
    droparea.addEventListener("drop", handleDrop);

    async function handleDrop(event)
    {
        await logItemAndFileEntryInformation(event.dataTransfer.items);
        event.preventDefault();
        webkit.messageHandlers.testHandler.postMessage("dropped");
    }

    function fileFromFileSystemFileEntry(fileEntry)
    {
        return new Promise(resolve => fileEntry.file(file => resolve(file)));
    }

    async function representationForFileSystemEntry(entry)
    {
        let lines = [];
        if (entry.isDirectory) {
            lines.push(`DIR: ${entry.fullPath}`);
            for (let child of await getChildEntries(entry))
                lines = lines.concat(await representationForFileSystemEntry(child));
        } else if (entry.isFile) {
            let file = await fileFromFileSystemFileEntry(entry);
            lines.push(`FILE: ${entry.fullPath} ('${file.type}', ${file.size} bytes)`);
        }
        return lines;
    }

    async function logItemAndFileEntryInformation(items)
    {
        output.value = "";
        for (let index = 0; index < items.length; index++) {
            let item = items.item(index);
            output.value += `Found data transfer item (kind: '${item.kind}', type: '${item.type}')\n`;
            let entry = item.webkitGetAsEntry();
            if (entry)
                output.value += (await representationForFileSystemEntry(entry)).sort().join("\n");
        }
    }
</script>
</html>