From 7151a2dbce908f7470d1987d4658c9fd86ec7d41 Mon Sep 17 00:00:00 2001
From: not-nullptr <62841684+not-nullptr@users.noreply.github.com>
Date: Sun, 13 Apr 2025 12:56:06 +0100
Subject: [PATCH] Revert "feat: drop or click to *convert* (#52)"

This reverts commit 5b5901c4c7e8acda897d7ab38ba9fba4c018db7f.
---
 src/lib/components/functional/Uploader.svelte | 153 +++++++++---------
 1 file changed, 73 insertions(+), 80 deletions(-)

diff --git a/src/lib/components/functional/Uploader.svelte b/src/lib/components/functional/Uploader.svelte
index 7aec8c4..c1d2968 100644
--- a/src/lib/components/functional/Uploader.svelte
+++ b/src/lib/components/functional/Uploader.svelte
@@ -1,99 +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 fileInput = $state<HTMLInputElement>();
+    let uploaderButton = $state<HTMLButtonElement>();
+    let fileInput = $state<HTMLInputElement>();
 
-	let acceptedTypes = $state<string>();
+    let acceptedTypes = $state<string>();
 
-	const setupFileInput = async () => {
-		if (!fileInput) return;
+    const setupFileInput = async () => {
+        if(!fileInput) return;
 
-		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(",");
-	};
+        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(",");
+    };
 
-	const uploadFiles = async () => {
-		if (!fileInput) return;
-		fileInput.click();
-	};
 
-	const handleFileChange = (e: Event) => {
-		if (!fileInput) return;
+    const uploadFiles = async () => {
+        if(!fileInput) return
+        fileInput.click();
+    };
 
-		const oldLength = files.files.length;
-		files.add(fileInput.files);
-		if (oldLength !== files.files.length) goto("/convert");
-	};
+    const handleFileChange = (e: Event) => {
+        if(!fileInput) return;
 
-	onMount(() => {
-		const handler = (e: Event) => {
-			e.preventDefault();
-			return false;
-		};
+        const oldLength = files.files.length;
+        files.add(fileInput.files);
+        if (oldLength !== files.files.length) goto("/convert");
+    };
 
-		uploaderButton?.addEventListener("dragover", handler);
-		uploaderButton?.addEventListener("dragenter", handler);
-		uploaderButton?.addEventListener("dragleave", handler);
-		uploaderButton?.addEventListener("drop", handler);
 
-		void setupFileInput();
+    onMount(() => {
+        const handler = (e: Event) => {
+            e.preventDefault();
+            return false;
+        };
 
-		return () => {
-			uploaderButton?.removeEventListener("dragover", handler);
-			uploaderButton?.removeEventListener("dragenter", handler);
-			uploaderButton?.removeEventListener("dragleave", handler);
-			uploaderButton?.removeEventListener("drop", handler);
-		};
-	});
+        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}
-/>
+<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 convert
-		</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>