Dropzone

Allows users to drag-and-drop files into a container to upload or process them.

Installation

npx kibo-ui@latest add 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

Multiple files

Images only

With custom empty state

Showing an image preview