| <!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> |
