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 shadcn@latest add https://ui-x.junwen-k.dev/r/dropzone.json

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>