From d4ca8ece002368e47ee212784c75d5a0f6a837a2 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 14 May 2025 21:55:16 +0600
Subject: [PATCH] web/remux: fix file receiver file import

---
 web/src/components/misc/FileReceiver.svelte | 27 +++++++++++++++------
 web/src/routes/remux/+page.svelte           |  1 +
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/web/src/components/misc/FileReceiver.svelte b/web/src/components/misc/FileReceiver.svelte
index 9c52189d..f0c73c21 100644
--- a/web/src/components/misc/FileReceiver.svelte
+++ b/web/src/components/misc/FileReceiver.svelte
@@ -5,11 +5,23 @@
     import IconFileImport from "@tabler/icons-svelte/IconFileImport.svelte";
     import IconUpload from "@tabler/icons-svelte/IconUpload.svelte";
 
-    export let files: FileList | undefined;
-    export let draggedOver = false;
-    export let acceptTypes: string[];
-    export let acceptExtensions: string[];
-    export let maxFileNumber: number = 100;
+    type Props = {
+        files: FileList | undefined;
+        draggedOver?: boolean;
+        acceptTypes: string[];
+        acceptExtensions: string[];
+        maxFileNumber?: number;
+        onImport: () => {};
+    }
+
+    let {
+        files = $bindable(),
+        draggedOver = $bindable(false),
+        acceptTypes,
+        acceptExtensions,
+        maxFileNumber = 100,
+        onImport,
+    }: Props = $props();
 
     let selectorStringMultiple = maxFileNumber > 1 ? ".multiple" : "";
 
@@ -31,7 +43,8 @@
                 if (userFiles.length > maxFileNumber) {
                     return alert("too many files, limit is " + maxFileNumber);
                 }
-                return files = userFiles;
+                files = userFiles;
+                onImport();
             }
         };
     };
@@ -40,7 +53,7 @@
 <div class="open-file-container" class:dragged-over={draggedOver}>
     <Meowbalt emotion="question" />
 
-    <button class="button open-file-button" on:click={openFile}>
+    <button class="button open-file-button" onclick={openFile}>
         <div class="dashed-stroke">
             <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
                 <rect width="100%" height="100%" fill="none" rx="24" ry="24" />
diff --git a/web/src/routes/remux/+page.svelte b/web/src/routes/remux/+page.svelte
index b1793c2d..213b5498 100644
--- a/web/src/routes/remux/+page.svelte
+++ b/web/src/routes/remux/+page.svelte
@@ -42,6 +42,7 @@
             <FileReceiver
                 bind:draggedOver
                 bind:files
+                onImport={remux}
                 acceptTypes={["video/*", "audio/*"]}
                 acceptExtensions={[
                     "mp4",