Docs
Dropzone
Dropzone
A dropzone is an area into which one or multiple objects can be dragged and dropped.
Drop files here or click to upload
You can upload files up to 10MB in size. Supported formats: JPG, PNG, PDF.
About
The <Dropzone /> component is built on top of react-dropzone.
Installation
npx shadcn@latest add https://ui-x.junwen-k.dev/r/dropzone.jsonUsage
import { Dropzone } from "@/components/ui/dropzone"<Dropzone
accept={{
"image/*": [".jpg", ".png"],
"application/pdf": [".pdf"],
}}
onDropAccepted={setFiles}
>
<DropzoneZone>
<DropzoneInput />
<DropzoneGroup className="gap-4">
<DropzoneUploadIcon />
<DropzoneGroup>
<DropzoneTitle>Drop files here or click to upload</DropzoneTitle>
<DropzoneDescription>
You can upload files up to 10MB in size. Supported formats: JPG, PNG,
PDF.
</DropzoneDescription>
</DropzoneGroup>
</DropzoneGroup>
</DropzoneZone>
</Dropzone>Examples
Default
Drop files here or click to upload
You can upload files up to 10MB in size. Supported formats: JPG, PNG, PDF.
Trigger
Drop files here
Please upload file with less than 4MB.