From 20d66cab5f63c3f32685eb13bdf646d73409fcb4 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Thu, 12 Dec 2024 04:37:02 +0100
Subject: [PATCH] Components: Add file input

---
 src/lib/components/FileInput.svelte | 35 +++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/lib/components/FileInput.svelte

diff --git a/src/lib/components/FileInput.svelte b/src/lib/components/FileInput.svelte
new file mode 100644
index 0000000..e3f4249
--- /dev/null
+++ b/src/lib/components/FileInput.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  let {
+    id,
+    name,
+    label,
+    accept = "*",
+    onchange = undefined,
+    disabled = false,
+    required = false,
+  } = $props();
+</script>
+
+{#if disabled}
+  <!-- HACK: Set --tw-bg-opacity to 1 so the disabled label/button looks like the disabled input -->
+  <label
+    for={id}
+    class="btn btn-disabled mt-2 w-full"
+    style="--tw-bg-opacity: 1">{label}</label
+  >
+{:else}
+  <label for={id} class="btn btn-ghost input-bordered mt-2 w-full"
+    >{label}</label
+  >
+{/if}
+<input
+  {id}
+  {name}
+  class="file-input file-input-bordered file-input-ghost"
+  type="file"
+  hidden
+  {disabled}
+  {required}
+  {onchange}
+  {accept}
+/>