File Drop Zone
A drag-and-drop area for uploading files, with size and type validation.
<script lang="ts">
import { FileDropZone } from "$lib/components/ui/file-drop-zone";
let files = $state<string[]>([]);
</script>
<div class="flex w-full max-w-md flex-col gap-3">
<FileDropZone
accept="image/*"
maxFiles={5}
fileCount={files.length}
maxFileSize={5 * 1024 * 1024}
onUpload={(uploaded) => {
files = [...files, ...uploaded.map((f) => f.name)];
}}
/>
{#if files.length}
<ul class="flex flex-col gap-1 text-sm tracking-[-0.39px] text-(--text)/72">
{#each files as name (name)}
<li>{name}</li>
{/each}
</ul>
{/if}
</div>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy the file-drop-zone source from the registry into $lib/components/ui/file-drop-zone.
Usage
<script lang="ts">
import { FileDropZone } from '$lib/components/ui/file-drop-zone';
let files = $state<string[]>([]);
</script>
<FileDropZone
accept="image/*"
maxFiles={5}
fileCount={files.length}
maxFileSize={5 * 1024 * 1024}
onUpload={(uploaded) => (files = [...files, ...uploaded.map((f) => f.name)])}
onFileRejected={({ file, reason }) => console.warn(reason, file.name)}
/>Props
accept— comma-separated list, e.g."image/*,.pdf".maxFiles/fileCount— limit the total number of files (pass the current count).maxFileSize— maximum bytes per file.onUpload(files)— receives the accepted files.onFileRejected({ file, reason })— called per rejected file.