Dropzone

Installation

This is assuming you have Shadcnn/UI set up in your project. If you haven't, follow this guide.

npx shadcn@latest add 'https://shadcn-dropzone.vercel.app/dropzone.json';

Usage

import {
  Dropzone,
  DropZoneArea,
  DropzoneDescription,
  DropzoneFileList,
  DropzoneFileListItem,
  DropzoneFileMessage,
  DropzoneTrigger,
  DropzoneMessage,
  DropzoneRemoveFile,
  DropzoneRetryFile,
  InfiniteProgress,
  useDropzone,
} from "@/components/dropzone";

const dropzone = useDropzone();
 
return (
  <Dropzone {...dropzone}>
    <DropzoneDescription>
      These will be uploaded to the server.
    </DropzoneDescription>
    <DropzoneMessage />
    <DropZoneArea>
      <DropzoneTrigger>
        Click here or drag and drop files to upload them
      </DropzoneTrigger>
      <DropzoneFileList>
        {dropzone.fileStatuses.map((file) => (
          <DropzoneFileListItem key={file.id} file={file}>
            <DropzoneRetryFile>Retry</DropzoneRetryFile>
            <DropzoneRemoveFile>Remove</DropzoneRemoveFile>
            <DropzoneFileMessage />
            <InfiniteProgress status={file.status} />
          </DropzoneFileListItem>
        ))}
      </DropzoneFileList>
    </DropZoneArea>
  </Dropzone>
);