From 9952d1563a21430233561f05a0d61f950be6de25 Mon Sep 17 00:00:00 2001
From: not-nullptr <needhelpwithrift@gmail.com>
Date: Mon, 11 Nov 2024 15:50:19 +0000
Subject: [PATCH] fix: uploader layout

---
 src/lib/components/visual/Uploader.svelte | 16 ++++++++++++----
 src/routes/+page.svelte                   |  4 +++-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/visual/Uploader.svelte b/src/lib/components/visual/Uploader.svelte
index 07729ba..06d4599 100644
--- a/src/lib/components/visual/Uploader.svelte
+++ b/src/lib/components/visual/Uploader.svelte
@@ -5,15 +5,23 @@
 		files: FileList | undefined;
 	}
 
+	let fileInput = $state<HTMLInputElement>();
+
 	let { files = $bindable() }: Props = $props();
+
+	const upload = () => {
+		if (!fileInput) return;
+		fileInput.click();
+	};
 </script>
 
-<div
-	class="flex items-center justify-center flex-col border-2 border-solid border-foreground rounded-xl w-full max-w-screen-lg h-80"
+<button
+	onclick={upload}
+	class="flex items-center justify-center cursor-pointer flex-col border-2 border-solid border-foreground rounded-xl px-4 py-2 w-full h-full"
 >
 	<Upload />
 	<h2>Drop or click to upload files</h2>
 	<p class="text-foreground-muted">the</p>
-</div>
+</button>
 
-<input type="file" class="hidden" bind:files />
+<input type="file" class="hidden" bind:files bind:this={fileInput} />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cc34a91..d9cd0e0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,7 +5,9 @@
 </script>
 
 <div class="flex items-center justify-center h-full">
-	<Uploader bind:files />
+	<div class="w-full max-w-screen-lg h-80">
+		<Uploader bind:files />
+	</div>
 </div>
 
 <style>