@aelig/dropzone

Dropzone

Add

pnpm dlx shadcn@latest add @aelig/dropzone

A composable file dropzone with upload status, retry, and validation helpers.

Preview

PDF or image files up to 5MB.

Select files

Usage

"use client"

import {
  Dropzone,
  DropZoneArea,
  DropzoneDescription,
  DropzoneFileList,
  DropzoneFileListItem,
  DropzoneMessage,
  DropzoneTrigger,
  useDropzone,
} from "@/components/ui/dropzone"

export function UploadDocuments() {
  const dropzone = useDropzone({
    validation: {
      maxFiles: 3,
      maxSize: 5 * 1024 * 1024,
    },
    onDropFile: async (file) => ({
      status: "success",
      result: { name: file.name },
    }),
  })

  return (
    <Dropzone {...dropzone}>
      <DropzoneDescription>PDF or image files up to 5MB.</DropzoneDescription>
      <DropZoneArea>
        <DropzoneTrigger>Select files</DropzoneTrigger>
      </DropZoneArea>
      <DropzoneMessage />
      <DropzoneFileList>
        {dropzone.fileStatuses.map((file) => (
          <DropzoneFileListItem key={file.id} file={file}>
            {file.fileName}
          </DropzoneFileListItem>
        ))}
      </DropzoneFileList>
    </Dropzone>
  )
}

Variants and options

validation

Configure maxFiles, maxSize, minSize, and accepted types.

file actions

Use remove and retry controls inside file list items.

upload state

Render pending, success, and error file states.