Drop or browse for files. Validates type, size and count, explains rejections, and lists what was added.
pnpm dlx shadcn@latest add @latheui/file-dropzonePart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
File Dropzone is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
Also accepts native div attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| files | File[] | — | Controlled list of accepted files. |
| onFilesChange | (files: File[]) => void | — | Called with the full list when files are added or removed. |
| accept | string | — | Allowed types, as on a file input: extensions, MIME types or wildcards such as image/*. |
| multiple | boolean | true | Allow more than one file. When false, a new file replaces the old one. |
| maxSize | number | — | Largest allowed file, in bytes. |
| maxFiles | number | — | Most files allowed in total. |
| disabled | boolean | false | Prevents adding and removing. |
| label | string | "Drop files here, or click to browse" | Main text in the drop area. |
| hint | string | — | Second line, usually the constraints. Linked as the input's description. |
| name | string | — | Name of the underlying file input. |
The component collects and validates files; uploading is yours. Control the list and clear it when the upload finishes.
async function upload() {
await Promise.all(files.map((file) => send(file)))
setFiles([])
}<FileDropzone className="[&_label]:flex-row [&_label]:py-4" label="Attach files" />