feat: use `browser-fs-access` polyfill for other browsers (#43)

components/publish/PublishWidget.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CreateStatusParams, StatusVisibility } from 'masto'
+import { fileOpen } from 'browser-fs-access'
 
 const {
   draftKey,
@@ -37,22 +38,24 @@ async function handlePaste(evt: ClipboardEvent) {
 }
 
 async function pickAttachments() {
-  if (!globalThis.showOpenFilePicker)
-    // TODO: FireFox & Safari don't support it.
-    return
-
-  const handles = await showOpenFilePicker({
-    multiple: true,
-    types: [{
+  const files = await fileOpen([
+    {
       description: 'Attachments',
-      accept: {
-        'image/*': ['.png', '.gif', '.jpeg', '.jpg', '.webp', '.avif', '.heic', '.heif'],
-        'video/*': ['.webm', '.mp4', '.m4v', '.mov', '.ogv', '.3gp'],
-        'audio/*': ['.mp3', '.ogg', '.oga', '.wav', '.flac', '.opus', '.aac', '.m4a', '.3gp', '.wma'],
+      multiple: true,
+      mimeTypes: ['image/*'],
+      extensions: ['.png', '.gif', '.jpeg', '.jpg', '.webp', '.avif', '.heic', '.heif'],
     },
-    }],
-  })
-  const files = await Promise.all(handles.map(handle => handle.getFile()))
+    {
+      description: 'Attachments',
+      mimeTypes: ['video/*'],
+      extensions: ['.webm', '.mp4', '.m4v', '.mov', '.ogv', '.3gp'],
+    },
+    {
+      description: 'Attachments',
+      mimeTypes: ['audio/*'],
+      extensions: ['.mp3', '.ogg', '.oga', '.wav', '.flac', '.opus', '.aac', '.m4a', '.3gp', '.wma'],
+    },
+  ])
   await uploadAttachments(files)
 }
 

package.json

@@ -28,6 +28,7 @@
     "@vue-macros/nuxt": "^0.0.2",
     "@vueuse/nuxt": "^9.5.0",
     "blurhash": "^2.0.4",
+    "browser-fs-access": "^0.31.1",
     "eslint": "^8.27.0",
     "esno": "^0.16.3",
     "floating-vue": "2.0.0-beta.20",

pnpm-lock.yaml

@@ -15,6 +15,7 @@ specifiers:
   '@vue-macros/nuxt': ^0.0.2
   '@vueuse/nuxt': ^9.5.0
   blurhash: ^2.0.4
+  browser-fs-access: ^0.31.1
   eslint: ^8.27.0
   esno: ^0.16.3
   floating-vue: 2.0.0-beta.20
@@ -49,6 +50,7 @@ devDependencies:
   '@vue-macros/nuxt': 0.0.2_nuxt@3.0.0
   '@vueuse/nuxt': 9.5.0_nuxt@3.0.0
   blurhash: 2.0.4
+  browser-fs-access: 0.31.1
   eslint: 8.27.0
   esno: 0.16.3
   floating-vue: 2.0.0-beta.20
@@ -2388,6 +2390,10 @@ packages:
       fill-range: 7.0.1
     dev: true
 
+  /browser-fs-access/0.31.1:
+    resolution: {integrity: sha512-jMz9f56DkLM7LyA8wZYO7CtpoF3RdUk1/FXrnRNybgV0R5eqk/fgFWR0k5IMjPYgK4jmZecytP/UDO5WBi9Dhg==}
+    dev: true
+
   /browserslist/4.21.4:
     resolution: {integrity: sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}