fix uploader for ios (#51)

src/lib/components/functional/Uploader.svelte

@@ -14,12 +14,13 @@
     const { class: classList }: Props = $props();
 
     let uploaderButton = $state<HTMLButtonElement>();
+    let fileInput = $state<HTMLInputElement>();
+
+    let acceptedTypes = $state<string>();
+
+    const setupFileInput = async () => {
+        if(!fileInput) return;
 
-	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) => {
@@ -27,16 +28,25 @@
                 }),
             )
         ).filter((c) => typeof c !== "undefined");
-		input.accept = filteredConverters
+        acceptedTypes = filteredConverters
             .map((c) => c.supportedFormats.join(","))
             .join(",");
-		input.onchange = (e) => {
+    };
+
+
+    const uploadFiles = async () => {
+        if(!fileInput) return
+        fileInput.click();
+    };
+
+    const handleFileChange = (e: Event) => {
+        if(!fileInput) return;
+
         const oldLength = files.files.length;
-			files.add(input.files);
+        files.add(fileInput.files);
         if (oldLength !== files.files.length) goto("/convert");
     };
-		input.click();
-	};
+
 
     onMount(() => {
         const handler = (e: Event) => {
@@ -49,6 +59,8 @@
         uploaderButton?.addEventListener("dragleave", handler);
         uploaderButton?.addEventListener("drop", handler);
 
+        void setupFileInput();
+
         return () => {
             uploaderButton?.removeEventListener("dragover", handler);
             uploaderButton?.removeEventListener("dragenter", handler);
@@ -58,6 +70,8 @@
     });
 </script>
 
+<input bind:this={fileInput} type="file" multiple class="hidden" onchange={handleFileChange} accept={acceptedTypes}>
+
 <button
     onclick={uploadFiles}
     bind:this={uploaderButton}