Simple File input for Svelte. The css classes use Tailwind but fill free to replace

FileInput.svelte

<script lang="ts">
  import { nanoid } from "nanoid";


	export let disabled: boolean = false;
	export let title: string = 'CHOOSE FILES'
	export let variant: 'confirm' | 'cancel' | 'normal' = "normal";
	export let id: string = nanoid(); // or any other way to generate a unique id like Math.random().toString()
	export const multiple: boolean = false;
</script>

<label class="p-1 {$$props.class ?? ''}" for={id}>
	<div
		class={`box-border px-4 py-2 shadow uppercase rounded flex justify-center items-center w-full  ${
			disabled
				? 'text-black bg-gray-100 cursor-not-allowed'
				: variant === 'confirm'
				? '!bg-green-900 !text-green-200 !dark:bg-green-900 !dark:text-green-200 !hover:bg-green-700 !dark:hover:bg-green-700'
				: variant === 'cancel'
				? '!bg-red-900 !text-red-200 !dark:bg-red-900 !dark:text-red-200 !hover:bg-red-700 !dark:hover:bg-red-700'
				: 'text-black bg-gray-300 dark:text-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-500'
		}`} on:click><slot />{title}</div
	>
	<input class="hidden" id={id} type="file" multiple on:change>
</label>

Exemple of use;

<FileInput on:change={loadFiles} multiple class="flex-1" title="upload files" />

const loadFiles = (e) => {
    const allFiles = Array.from(e.target.files);
};