║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Dropzone description: Allows users to drag-and-drop files into a container to upload or process them. icon: ImageUp dependencies:

• https://react-dropzone.js.org/
• https://lucide.dev/ installer: dropzone

---

Features

• Drag and drop files to upload
• Customize the empty state and content
• Intelligently handle file types, sizes, and counts
• Show file names and sizes in a human readable format
• Handle errors and reject files
• Disable the dropzone when needed
• Customize the appearance with className
• Show file previews for images
• Replace existing files by dragging new ones
• Context provider for accessing dropzone state

Examples

With min and max sizes

<Preview path="dropzone-min-max" />

Multiple files

<Preview path="dropzone-multiple" />

Images only

<Preview path="dropzone-accept" />

With custom empty state

<Preview path="dropzone-custom-empty-state" />

Showing an image preview

<Preview path="dropzone-image-preview" />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║