Status

FileDrop

Where documents and images go in: brand briefs, spec sheets, product shots, signed contracts.

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`onFiles`Required	`(files: File[]) => void`
`title`	`React.ReactNode`
`hint`	`React.ReactNode`
`buttonLabel`	`string`
`accept`	`string`
`multiple`	`boolean`
`disabled`	`boolean`
`error`	`React.ReactNode`
`size`	`'M' \| 'L'`
`className`	`string`

Guidelines

Where documents and images go in: brand briefs, spec sheets, product shots, signed contracts. Drop files on the dashed zone, or use the Choose files button.

Provide: onFiles(files), plus title ("Drop documents or images here"), hint (accepted types and size, "PDF, Word, images up to 50 MB"), accept (as on a file input), multiple (default true), buttonLabel, error for a failed upload, and size (L on phones).

The button is the keyboard and touch path; the zone itself is for dragging. Never hide the button.
Show what was added right below, as a list of files (ListRow with a file or image icon, the type, size and date) or a grid of image thumbnails.
Say what went wrong in error in plain words ("That file is over 50 MB"), and keep the zone usable.