src/routes/viewer/+page.svelte

@@ -9,17 +9,15 @@
   import { filterFiles } from '$lib/utils/filterFiles';
   import { supportedFormats } from '$lib/format-readers';
 
-  /** @type {import('./$types').PageProps} */
-  let { data } = $props();
-
-  const metadata = data.metadata;
-
-  /** @type {File[] | []} */
-  let acceptedFiles = [];
-  /** @type {File[] | []} */
-  let rejectedFiles = [];
-
-  let areAcceptedFilesRendered = false;
+  /**
+   * @type {File[]}
+   */
+  let acceptedFiles = $state([]);
+  /**
+   * @type {File[]}
+   */
+  let rejectedFiles = $state([]);
+  let areAcceptedFilesRendered = $state(false);
 
   const fileRequirements = {
     supportedFormats: Object.values(supportedFormats).map((f) => f.ext),
@@ -41,8 +39,8 @@
    * @param {Event | DragEvent} evt
    */
   function onChange(evt) {
-    acceptedFiles = null;
-    rejectedFiles = null;
+    acceptedFiles = [];
+    rejectedFiles = [];
     areAcceptedFilesRendered = false;
 
     const changedFiles =
@@ -71,6 +69,11 @@
       if (el) el.click();
     }
   }
+
+  /** @type {import('./$types').PageProps} */
+  let { data } = $props();
+
+  const metadata = data.metadata;
 </script>
 
 <Seo {...metadata} />