Persist project file between reloads in Firefox

GarboMuffin · GarboMuffin · commit 956a9d853682 · 2022-02-12T21:46:01.000-06:00
diff --git a/src/p4/SelectProject.svelte b/src/p4/SelectProject.svelte
@@ -1,5 +1,5 @@
 <script>
-  import {onMount} from 'svelte';
+  import {onMount, tick} from 'svelte';
   import {writable} from 'svelte/store';
   import {_} from '../locales';
   import Section from './Section.svelte';
@@ -33,6 +33,20 @@
   let files = null;
   let fileInputElement;
 
+  // This is used to remember files between reloads in some browsers (currently only Firefox)
+  // This element is defined in the HTML of template.ejs because some browsers won't
+  // autocomplete file inputs generated by JS.
+  const inputForRememberingProjectFile = document.querySelector('.input-for-remembering-project-file');
+  if (inputForRememberingProjectFile) {
+    // We'll check for autocompleted files after mount so that fileInputElement is defined.
+    onMount(() => {
+      const storedFiles = inputForRememberingProjectFile.files;
+      if (storedFiles.length) {
+        setFiles(inputForRememberingProjectFile.files, false);
+      }
+    });
+  }
+
   export let projectData = null;
   const reset = () => {
     projectData = null;
@@ -131,19 +145,30 @@
   const handleFocus = (e) => {
     e.target.select();
   };
+  const setFiles = (newFiles, canAutomaticallyLoadProject) => {
+    files = newFiles;
+    if (fileInputElement && fileInputElement.files !== files) {
+      fileInputElement.files = files;
+    }
+    if (inputForRememberingProjectFile && inputForRememberingProjectFile.files !== files) {
+      inputForRememberingProjectFile.files = files;
+    }
+    if (canAutomaticallyLoadProject && files.length) {
+      // Setting files= above will trigger a tick that cancels the current task. We need to wait for that
+      // tick to finish before starting a new task, otherwise it'll be cancelled immediately.
+      tick().then(load);
+    }
+  };
   const handleDrop = ({detail: dataTransfer}) => {
     const name = dataTransfer.files[0].name;
     if (name.endsWith('.sb') || name.endsWith('.sb2') || name.endsWith('.sb3')) {
       $type = 'file';
-      files = dataTransfer.files;
-      fileInputElement.files = files;
+      setFiles(dataTransfer.files, true);
     }
   };
-
-  // Automatically start loading when a file is selected
-  $: if (files && files[0]) {
-    load();
-  }
+  const handleFileInputChange = (e) => {
+    setFiles(e.target.files, true);
+  };
 </script>
 
 <style>
@@ -184,7 +209,7 @@
           <input type="radio"  name="project-type" bind:group={$type} value="file">
           {$_('select.file')}
         </label>
-        <input hidden={$type !== "file"} bind:files={files} bind:this={fileInputElement} type="file" accept=".sb,.sb2,.sb3">
+        <input hidden={$type !== "file"} on:change={handleFileInputChange} bind:this={fileInputElement} type="file" accept=".sb,.sb2,.sb3">
       </div>
       <div class="option">
         <label>
diff --git a/src/p4/template.ejs b/src/p4/template.ejs
@@ -21,10 +21,15 @@
         background-color: #111;
         color-scheme: dark;
       }
+      .input-for-remembering-project-file {
+        display: none;
+      }
     </style>
   </head>
   <body>
     <noscript>This page requires JavaScript.</noscript>
+    <!-- This element needs to exist in the HTML for some browsers to autocomplete it. -->
+    <input type="file" class="input-for-remembering-project-file" autocomplete="on">
     <div id="app"></div>
     <script>
       (function() {
