Click, drag, or paste target for image files with consumer-owned validation.
Install with the CLI, or copy the component source into your project.
Add image-dropzone (npm)
npx --yes -p github:itsvigneshv/default-file-ui#main df-ui add image-dropzone
Click, drag, or paste an image into the dropzone.
Click, drag, or paste target for image files. Validation and copy stay with the consumer.
| Prop | Type | Default | Notes |
|---|---|---|---|
| onFile | (file: File) => void | - | Called when a file passes validation (required). |
| validateFile | (file: File) => string | null | - | Return an error message to reject the file, or null to accept. |
| onReject | (message: string) => void | - | Called with the rejection message from validateFile. |
| accept | string | image/png,image/jpeg,image/webp,image/gif | File input accept attribute. |
| enablePaste | boolean | true | Listen for image paste on the window while mounted. |
| disabled | boolean | false | Disable interaction and paste handling. |
| title | ReactNode | - | Primary label inside the dropzone. |
| description | ReactNode | - | Secondary line under the title. |
| hint | ReactNode | - | Optional tertiary hint (formats, size limits). |
| icon | ReactNode | - | Leading icon. Defaults to ImagePlus. |
| className | string | - | Additional styles on the button shell. |
Theme defaults live on :root. Override these globally or on a local host.
| Token | Type | Default | Notes |
|---|---|---|---|
| --df-image-dropzone-min-height | CSS length | calc(30 * var(--spacing-unit)) | Minimum dropzone height. |
| --radius-lg | CSS length | - | Dropzone corner radius. |
| --border | CSS color | - | Dashed border color. |
| --muted | CSS color | - | Idle fill. |
| --primary | CSS color | - | Active and hover accent. |