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
pnpm dlx cross-env REGISTRY_URL=https://ui-x.junwen-k.dev/r pnpm dlx shadcn@latest add dropzone
Usage
import {
Dropzone,
DropzoneDescription,
DropzoneGroup,
DropzoneInput,
DropzoneTitle,
DropzoneUploadIcon,
DropzoneZone,
} 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.