components / dropzone
dropzone.
standalone drag-and-drop upload zone — validates a drop against accept/maxSize/maxFiles and hands you File[], with optional rows showing size, upload progress and errors. stateless by design: upload transport is yours. drag depth is counted rather than flagged, so the highlight doesn't strobe when the pointer crosses a child, and the zone is a real button so click, enter and space all open the picker.
- brief-v2.pdf277 kb
installation
bunx @justin06lee/chrome@latest add dropzoneprops
| name | type | default | description |
|---|---|---|---|
| onFiles * | (files: File[]) => void | - | receives everything that passed validation. |
| onReject | (rejections: DropzoneRejection[]) => void | - | { file, reason: 'type' | 'size' | 'count' }[]. |
| accept | string | - | native input syntax: '.pdf,.md,image/*'. also enforced on drop. |
| maxSize | number | - | per-file limit in bytes. |
| maxFiles | number | - | cap on files accepted per drop. |
| multiple | boolean | true | |
| disabled | boolean | false | |
| label | ReactNode | 'drop files here' | |
| hint | ReactNode | - | second line — formats and limits. |
| files | DropzoneFile[] | - | { id, name, size?, progress?, error? }[] rendered as rows under the zone. |
| onRemove | (id: string) => void | - | adds a remove button to each row. |
| accent | string | '#ffffff' | active border and progress-bar colour. |
| className | string | - |