Dropzone

Quick Preview

Upload property images

Drag images here or browse from your device.

Composition

Use this public composition when building Dropzone:

Dropzone
├── DropzoneArea
│   ├── DropzoneIcon
│   ├── DropzoneTitle
│   ├── DropzoneDescription
│   └── DropzoneTrigger
└── DropzoneInput

Usage

<Dropzone accept="image/*" multiple onFilesAccepted={handleFiles}>
  <DropzoneArea>
    <DropzoneIcon />
    <DropzoneTitle>Choose a file or drag & drop</DropzoneTitle>
    <DropzoneDescription>JPEG, PNG – up to 2 MB</DropzoneDescription>
    <DropzoneTrigger />
  </DropzoneArea>
  <DropzoneInput />
</Dropzone>

Examples

Default Dropzone

Use this as the starting point for Dropzone. Keep product data, routing, fetching, and authorization logic in the consuming app.

Upload property images

Drag images here or browse from your device.

Validation and rejection feedback

Set maxFiles and maxSize and read onFilesChange to show accepted files and per-file rejection reasons.

Upload up to 3 images

JPEG or PNG, 2 MB max per file.

Props

Prop/API	Type	Default	Description
`accept`	`string`	`"*"`	Accepted MIME types or extensions (input `accept` syntax).
`multiple`	`boolean`	`false`	Allow selecting more than one file.
`maxFiles` / `maxSize`	`number`	unlimited	Limits; violations arrive as rejections.
`onFilesAccepted`	`(files: File[]) => void`	-	Called with the accepted files.
`onFilesRejected`	`(rejections: FileRejection[]) => void`	-	Called with per-file error codes and messages.
`onFilesChange`	`(result: FilePickerResult) => void`	-	Called with both accepted and rejected files.
`disabled`	`boolean`	`false`	Disables the whole drop area.
`label`	`string`	sensible default	Accessible label for the drop area (DropzoneArea).
`idleLabel` / `draggingLabel` / `disabledLabel`	`ReactNode`	-	State-aware copy for DropzoneTitle and DropzoneDescription.
`className`	`string`	-	Local layout or spacing overrides.
native/root props	React component props	-	Passed through to the underlying root or primitive.

Accessibility

Preserve the documented Dropzone composition so labels, triggers, content, and controls remain connected.
The drop area is a labelled button with Enter/Space support; drag-state changes are announced via a live region.
Provide visible labels or accessible names for interactive controls.
Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
Do not communicate state with color alone; include text, icons, or helper copy.

On this page