Drag-and-drop file upload area that also opens the native file picker on click, Enter, or Space. Use it wherever a user uploads a file: an avatar or image upload, a CSV or spreadsheet import, a document/PDF/resume upload, attachments, a bulk media drop, or an import step in a form or wizard. shadcn/ui ships no dropzone or file input. Wraps a hidden <input type="file"> so it stays a real form control, and filters both dropped and picked files by `accept` (mime, mime wildcard like image/*, or .ext), `maxSize` in bytes, and `maxFiles`, calling `onReject` with the reason (type, size, too-many) for anything skipped. Works controlled or uncontrolled via a File[] value, forwards a ref to the input, and toggles a highlighted drag-over state. Accessible as a role=button region with keyboard activation, a focus-visible ring, an aria-live announcement on every add/reject, and a disabled state; supports single or multiple files and custom children for the drop label. Depends only on lucide-react for the upload icon.
Provided by pulld
Install directly from the provider.
Light Mode
Dark Mode
Theme
CSS
No CSS found.