Drop or pick files, folders too: type and size limits, a list to review, posted with the form.
Images or PDFs, shared with the whole team.
Usage
<script lang="ts">
import { toast } from "svelte-sonner";
import FileDropzone, {
type FileRejection,
} from "@zedensix/ui/components/file-dropzone";
const reasons: Record<FileRejection, string> = {
"too-large": "is over 10 MB",
"too-many": "is one file too many",
type: "isn't an image or a PDF",
};
let files = $state<File[]>([]);
</script>
<FileDropzone
label="Attachments"
name="attachments"
description="Images or PDFs, shared with the whole team."
accept="image/*,.pdf"
maxFiles={5}
maxFileSize={10 * 1024 * 1024}
folders
bind:files
onreject={({ file, reason }) =>
toast.error(`${file.name} ${reasons[reason]}.`)}
/>