Fix file select to fall back to old file API

index.html

@@ -139,29 +139,36 @@
 
   <script>
     window.testImages = [];
-
-    // At the top of your script, declare these variables
     let imageHandles = [];
 
-    // Replace the existing image loader code with this:
-    document.getElementById('imageLoader').addEventListener('click', async function (e) {
+    const fileInput = Object.assign(document.createElement('input'), {
+      type: 'file', multiple: true, 
+      accept: '.png,.gif,.jpeg,.jpg,.webp,.avif,.svg,image/*', 
+      style: 'display:none',
+    });
+    document.body.appendChild(fileInput);
+
+    document.getElementById('imageLoader').addEventListener('click', async () => {
       try {
-        const handles = await window.showOpenFilePicker({
+        imageHandles = await window.showOpenFilePicker({
           multiple: true,
-          types: [{
-            description: 'Images',
-            accept: {
-              'image/*': ['.png', '.gif', '.jpeg', '.jpg', '.webp', '.avif', '.svg']
-            }
-          }]
+          types: [{ description: 'Images', accept: { 'image/*': ['.png','.gif','.jpeg','.jpg','.webp','.avif','.svg'] }}]
         });
-        imageHandles = handles;
-        let { get, set } = await import('https://unpkg.com/[email protected]/dist/esm/index.js');
-        await set('imageHandles', imageHandles);
-        await loadImagesFromHandles();
-      } catch (err) {
-        console.error("Error selecting files:", err);
+      } catch {
+        fileInput.click();
+        return;
       }
+      let { set } = await import('https://unpkg.com/[email protected]/dist/esm/index.js');
+      await set('imageHandles', imageHandles);
+      await loadImagesFromHandles();
+    });
+
+    fileInput.addEventListener('change', async ({ target: { files } }) => {
+      if (!files.length) return;
+      imageHandles = Array.from(files).map(file => ({ getFile: async () => file, kind: 'file', name: file.name }));
+      let { set } = await import('https://unpkg.com/[email protected]/dist/esm/index.js');
+      await set('imageHandles', imageHandles);
+      await loadImagesFromHandles();
     });
 
     async function loadImagesFromHandles() {