File Dropzone

A React drag and drop upload zone with accept and reject states, type and size checks, image previews, per file progress, retry and screen reader updates.

src/registry/ui/file-dropzone.tsx/r/file-dropzone.json

Any file, with upload progress

Drop files to upload

Browse or drag here · up to 20.0 MB

Images only, one at a time

Upload a logo

Browse or drag here · PNG, JPEG, WEBP · up to 5.0 MB

Drag a file over it

Installation#

bash

npx shadcn@latest add @minidev/file-dropzone

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/file-dropzone.json

Usage#

tsx

import { FileDropzone } from "@/components/ui/file-dropzone"

export function Example() {
  return <FileDropzone />
}

API reference#

FileDropzone props
Prop	Type	Default
`onFiles`	`(files: File[]) => void`	`-`
`upload`	`(file: File, onProgress: (p: number) => void) => Promise<void>`	`-`
`accept`	`string`	`-`
`multiple`	`boolean`	`true`
`maxSize`	`number`	`-`
`maxFiles`	`number`	`-`
`disabled`	`boolean`	`-`
`showList`	`boolean`	`true`
`label`	`string`	`"Drop files to upload"`
`hint`	`string`	`-`
`className`	`string`	`-`