Directory Handle Testing

This was when I started looking into the project again just a few days ago! I noticed that you couldn't drag a folder into the workspace for an https://vscode.dev window, so I thought I'd make a demo to show off how it could work. Turns out I also happened to find a bug in Chrome OS! You can read all about that here: microsoft/vscode#141935 That bug report spurred a few more that I also helped out with, WICG/file-system-access#361 and https://bugs.chromium.org/p/chromium/issues/detail?id=1295210. Pretty crazy to be contributing to open source, this is so fun!!!
Offroaders123 · Feb 8, 2022 · 3f93e9f · 3f93e9f
1 parent e3efe06
commit 3f93e9f
Showing 1 changed file with 63 additions and 0 deletions.
diff --git a/Structure Viewer.html b/Structure Viewer.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en-US">
+
+<head>
+
+<title>Structure Viewer</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+<style>
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+  body {
+    font-family: sans-serif;
+  }
+</style>
+
+</head>
+
+<body>
+
+<!-- WebkitDirectory testing -->
+<!--script>
+const body = document.body;
+let directory;
+
+const legacyOpener = document.createElement("input");
+legacyOpener.type = "file";
+legacyOpener.setAttribute("webkitdirectory","");
+legacyOpener.setAttribute("autofocus","");
+body.appendChild(legacyOpener);
+
+legacyOpener.addEventListener("change",event => {
+  directory = event.target.files;
+  console.log(directory);
+});
+</script-->
+
+<script type="module">
+const body = document.body;
+
+document.addEventListener("dragover",event => event.preventDefault());
+document.addEventListener('drop', async (e) => {console.log("Item dropped!");
+  e.preventDefault();
+
+  const fileHandlesPromises = [...e.dataTransfer.items]
+    .filter((item) => item.kind === 'file')
+    .map((item) => item.getAsFileSystemHandle());
+
+  for await (const handle of fileHandlesPromises) {
+    if (handle.kind === 'directory') {
+      console.log(`Directory: ${handle.name}`);
+    } else {
+      console.log(`File: ${handle.name}`);
+    }
+  }
+});
+</script>
+
+</body>
+
+</html>