Add File System Access showOpenFilePicker

Author: scheib

index.html

@@ -52,6 +52,8 @@
     <button id="eme">Encrypted Media (EME)</button>
     <button id="idle-detection">Idle Detection</button>
     <button id="persistent-storage">Persistent Storage</button>
+    <button id="open-file-picker">Open File Picker</button>
+    <button id="open-directory-picker">Open Directory Picker</button>
     <button id="protocol-handler">Protocol Handler</button>
     <button id="webauthn-attestation">WebAuthn Attestation</button>
     <button id="nfc">NFC</button>

index.js

@@ -502,6 +502,32 @@ window.addEventListener("load", () => {
         displayOutcome("persistent-storage", "error"),
       );
     },
+    "open-file-picker": () => {
+      if ("showOpenFilePicker" in window) {
+        window.showOpenFilePicker().then(
+          displayOutcome("open-file-picker", "success"),
+          displayOutcome("open-file-picker", "error"),
+        );
+      } else {
+        displayOutcome(
+          "open-file-picker",
+          "error",
+        )("window.showOpenFilePicker not available");
+      }
+    },
+    "open-directory-picker": () => {
+      if ("showDirectoryPicker" in window) {
+        window.showDirectoryPicker().then(
+          displayOutcome("open-directory-picker", "success"),
+          displayOutcome("open-directory-picker", "error"),
+        );
+      } else {
+        displayOutcome(
+          "open-directory-picker",
+          "error",
+        )("window.showDirectoryPicker not available");
+      }
+    },
 
     "protocol-handler": () => {
       // https://www.w3.org/TR/html5/webappapis.html#navigatorcontentutils