File Dropzone

Drop files or browse for them, with type, size and count checks and a list of what was picked.

$ pnpm dlx shadcn@latest add https://dashral.com/r/file-dropzone.json

Product photos

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/file-dropzone.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/file-dropzone

Usage

example.tsx

1import { FileDropzone } from "@/components/dashral/file-dropzone"
2
3<FileDropzone
4  label="Attachments"
5  accept="image/*,.pdf"
6  maxSize={5 * 1024 * 1024}
7  onValueChange={(files) => api.upload(files)}
8/>

Examples

One file

multiple={false}: a new file replaces the old one. title and hint set the text inside the drop area.

Contract

Upload queue

showFiles={false} and your own list: a bar, time left and Cancel per file, Retry when one fails.

1 of 3 uploaded

Q3 report.pdf
2.4 MB · Uploaded
Product shots.zip33%
6.0 MB of 18.0 MB · 8s left
Launch video.mp4
Upload failed: the connection dropped.

API reference

FileDropzone

Prop	Type	Default
`value / defaultValue`	`File[]` Picked files, controlled or initial.	`[]`
`onValueChange`	`(value: File[]) => void` Called with the new value.	—
`accept`	`string` Like the accept attribute: "image/*", ".pdf,.docx".	—
`multiple`	`boolean` Several files, or one that replaces the last.	`true`
`maxFiles / maxSize`	`number` How many, and the largest size in bytes.	—
`title / hint`	`ReactNode` The lines inside the drop area; by default the hint says what's accepted.	—
`showFiles`	`boolean` false hides the list of picked files, to show your own (with upload progress, say).	`true`
`disabled / id / name`		—
`label`	`ReactNode` Shown above, linked to the control.	—
`description`	`ReactNode` A hint under the control.	—
`error`	`boolean \| ReactNode` true shows the error style; a message also shows under the control.	—
`labelAction`	`ReactNode` At the end of the label's row, e.g. a “Forgot password?” link or the current value.	—
`withAsterisk`	`boolean` Marks the label with an asterisk, e.g. alongside required.	`false`
`classNames`	`{ root, label, description, error, dropzone, files }` Classes for each part.	—

Keyboard

Keys	Action
`Tab`	Focus the drop area
`Enter`or`Space`	Open the file picker
`Tab`	Then each file's remove button

Accessibility

The drop area is a button, described by the hint, so it works without dragging.
Refused files are listed in an alert with the reason; each file's remove button names the file.