A drop zone for file uploads. Accepts drag-and-drop or click-to-browse, and validates files
against accept (MIME type / extension) and maxSize constraints before passing
them through.
Basic Example
Drop a file onto the zone or click to open the file browser. Accepted files arrive via the onfiles callback.
Highlighting code...
No preview available
Example
Accept Filtering
The accept prop takes a comma-separated string of MIME types and file extensions
(e.g. image/*,.pdf). Files that don't match are rejected and reported via onerror.
Highlighting code...
No preview available
Example
Max File Size
Set maxSize in bytes to reject files that exceed the limit. Oversized files trigger onerror with reason: 'size'.
No preview available
Example
Custom Content
Override the default drop zone UI with a content snippet. The snippet receives a dragging boolean so you can style the active drag state.
Highlighting code...
No preview available
Example
Props
- accept — MIME types / extensions (comma-separated)
- maxSize — max file size in bytes
- multiple — allow selecting multiple files
- disabled — disable the drop zone
- labels — label overrides
- class — additional CSS classes
Events & Snippets
- onfiles — called with validated
File[] - onerror — called per rejected file with
{file, reason} - content — snippet
(dragging: boolean)for custom UI