Dropzone
Select or drop local files and handle accepted files and size rejections.
Dropzone passes selected or dropped files to onFiles. The application
validates file contents and sends the files to its upload service.
accept supplies a file-type hint to the native file picker. It does not filter
dropped files. Validate file types in your handler and on the server.
maxSize checks both selected and dropped files, in bytes. Files larger than
the limit go to onReject; files equal to the limit are accepted. If maxSize
is omitted, the component applies no size limit. With multiple omitted or
false, onFiles receives only the first file that passes the size check.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
onFiles | (files: File[]) => void | — | Called when the user picks or drops native files. |
accept | string | — | File input accept string, e.g. ".csv,image/*". |
multiple | boolean | — | Allow multiple files. |
disabled | boolean | — | Prevents interaction. |
maxSize | number | — | Rejects files larger than this, in bytes. |
onReject | (rejections: { file: File; reason: string }[]) => void | — | Called for oversized files. |
label | ReactNode | "Drop files here" | Primary label text. |
hint | ReactNode | — | Dim secondary text below the label. |
icon | ReactNode | — | Custom icon override (defaults to upload icon). |
compact | boolean | — | Shrinks to a single-line strip. |
Specimens
Basic
The default dropzone with the upload icon, "Drop files here or browse" label, and click-to-browse behavior.
Compact
Set compact to shrink the dropzone to a single-line strip for sidebars, settings panels, or dense forms.
With accept hint
Use accept to suggest file types in the native picker and hint to explain
the accepted formats. Apply the same validation to selected and dropped files
in onFiles.
Disabled
A disabled dropzone prevents clicks, drops, and keyboard activation.
Import
import { Dropzone } from "@solarius/onset";