From 8017d5d72d2d98f46f582dddab43a4cf7134fb44 Mon Sep 17 00:00:00 2001
From: Quinn Vinlove <quinn.vinlove@gmail.com>
Date: Sat, 12 Apr 2025 13:46:27 -0400
Subject: [PATCH] fix uploader for ios (#51)

---
 src/lib/components/functional/Uploader.svelte | 146 ++++++++++--------
 1 file changed, 80 insertions(+), 66 deletions(-)

diff --git a/src/lib/components/functional/Uploader.svelte b/src/lib/components/functional/Uploader.svelte
index be6fd49..c1d2968 100644
--- a/src/lib/components/functional/Uploader.svelte
+++ b/src/lib/components/functional/Uploader.svelte
@@ -1,78 +1,92 @@
 <script lang="ts">
-	import { UploadIcon } from "lucide-svelte";
-	import Panel from "../visual/Panel.svelte";
-	import clsx from "clsx";
-	import { onMount } from "svelte";
-	import { effects, files } from "$lib/store/index.svelte";
-	import { converters } from "$lib/converters";
-	import { goto } from "$app/navigation";
+    import { UploadIcon } from "lucide-svelte";
+    import Panel from "../visual/Panel.svelte";
+    import clsx from "clsx";
+    import { onMount } from "svelte";
+    import { effects, files } from "$lib/store/index.svelte";
+    import { converters } from "$lib/converters";
+    import { goto } from "$app/navigation";
 
-	type Props = {
-		class?: string;
-	};
+    type Props = {
+        class?: string;
+    };
 
-	const { class: classList }: Props = $props();
+    const { class: classList }: Props = $props();
 
-	let uploaderButton = $state<HTMLButtonElement>();
+    let uploaderButton = $state<HTMLButtonElement>();
+    let fileInput = $state<HTMLInputElement>();
 
-	const uploadFiles = async () => {
-		const input = document.createElement("input");
-		input.type = "file";
-		input.multiple = true;
-		// filter converters to ones where await converter.valid() is true
-		const filteredConverters = (
-			await Promise.all(
-				converters.map(async (c) => {
-					if (await c.valid()) return c;
-				}),
-			)
-		).filter((c) => typeof c !== "undefined");
-		input.accept = filteredConverters
-			.map((c) => c.supportedFormats.join(","))
-			.join(",");
-		input.onchange = (e) => {
-			const oldLength = files.files.length;
-			files.add(input.files);
-			if (oldLength !== files.files.length) goto("/convert");
-		};
-		input.click();
-	};
+    let acceptedTypes = $state<string>();
 
-	onMount(() => {
-		const handler = (e: Event) => {
-			e.preventDefault();
-			return false;
-		};
+    const setupFileInput = async () => {
+        if(!fileInput) return;
 
-		uploaderButton?.addEventListener("dragover", handler);
-		uploaderButton?.addEventListener("dragenter", handler);
-		uploaderButton?.addEventListener("dragleave", handler);
-		uploaderButton?.addEventListener("drop", handler);
+        const filteredConverters = (
+            await Promise.all(
+                converters.map(async (c) => {
+                    if (await c.valid()) return c;
+                }),
+            )
+        ).filter((c) => typeof c !== "undefined");
+        acceptedTypes = filteredConverters
+            .map((c) => c.supportedFormats.join(","))
+            .join(",");
+    };
 
-		return () => {
-			uploaderButton?.removeEventListener("dragover", handler);
-			uploaderButton?.removeEventListener("dragenter", handler);
-			uploaderButton?.removeEventListener("dragleave", handler);
-			uploaderButton?.removeEventListener("drop", handler);
-		};
-	});
+
+    const uploadFiles = async () => {
+        if(!fileInput) return
+        fileInput.click();
+    };
+
+    const handleFileChange = (e: Event) => {
+        if(!fileInput) return;
+
+        const oldLength = files.files.length;
+        files.add(fileInput.files);
+        if (oldLength !== files.files.length) goto("/convert");
+    };
+
+
+    onMount(() => {
+        const handler = (e: Event) => {
+            e.preventDefault();
+            return false;
+        };
+
+        uploaderButton?.addEventListener("dragover", handler);
+        uploaderButton?.addEventListener("dragenter", handler);
+        uploaderButton?.addEventListener("dragleave", handler);
+        uploaderButton?.addEventListener("drop", handler);
+
+        void setupFileInput();
+
+        return () => {
+            uploaderButton?.removeEventListener("dragover", handler);
+            uploaderButton?.removeEventListener("dragenter", handler);
+            uploaderButton?.removeEventListener("dragleave", handler);
+            uploaderButton?.removeEventListener("drop", handler);
+        };
+    });
 </script>
 
+<input bind:this={fileInput} type="file" multiple class="hidden" onchange={handleFileChange} accept={acceptedTypes}>
+
 <button
-	onclick={uploadFiles}
-	bind:this={uploaderButton}
-	class={clsx(`hover:scale-105 active:scale-100 ${$effects ? "" : "!scale-100"} duration-200 ${classList}`)}
->
-	<Panel
-		class="flex justify-center items-center w-full h-full flex-col pointer-events-none"
-	>
-		<div
-			class="w-16 h-16 bg-accent rounded-full flex items-center justify-center p-4"
-		>
-			<UploadIcon class="w-full h-full text-on-accent" />
-		</div>
-		<h2 class="text-center text-2xl font-semibold mt-4">
-			Drop or click to upload
-		</h2>
-	</Panel>
+    onclick={uploadFiles}
+    bind:this={uploaderButton}
+    class={clsx(`hover:scale-105 active:scale-100 ${$effects ? "" : "!scale-100"} duration-200 ${classList}`)}
+> 
+    <Panel
+        class="flex justify-center items-center w-full h-full flex-col pointer-events-none"
+    >
+        <div
+            class="w-16 h-16 bg-accent rounded-full flex items-center justify-center p-4"
+        >
+            <UploadIcon class="w-full h-full text-on-accent" />
+        </div>
+        <h2 class="text-center text-2xl font-semibold mt-4">
+            Drop or click to upload
+        </h2>
+    </Panel>
 </button>