FileDropzone

Multi-file / folder / ZIP drag-drop upload zone with thumbnail grid

Demo

Upload files

Drag and drop files, folders, or ZIP archives, or click to browse

Accepted: .png, .jpg, .webp, .pdf

Max size: 20 MB · Max files: 8

You can drop a folder or ZIP archive

Single-file, image only

Upload files

Drag and drop files, folders, or ZIP archives, or click to browse

Accepted: .png, .jpg, .webp

Max size: 5 MB · Max files: 1

You can drop a folder or ZIP archive

Props

Prop	Type	Default	Description
`accept`	`string[]`	`[]`	MIME types to accept (e.g. `["image/png"]`)
`maxSize`	`number`	`50 MB`	Max file size in bytes
`maxFiles`	`number`	`10`	Maximum files in the grid
`multiple`	`boolean`	`false`	Allow multi-file selection
`uploadedFiles`	`FileDropzoneFile[]`	`[]`	Already-uploaded files to show in the grid
`uploading`	`boolean`	`false`	Show upload spinner
`disabled`	`boolean`	`false`	Disable interactions
`onFilesAdded`	`(files: FileDropzoneFile[]) => void`	-	Called with new files when dropped or picked
`onRemove`	`(file: FileDropzoneFile) => void`	-	Called when user removes a file from the grid

FileDropzoneFile type

interface FileDropzoneFile {
  file?: File;        // Raw File for pending uploads
  name: string;
  mimeType: string;
  size?: number;
  url?: string;       // For already-uploaded files
  meta?: Record<string, unknown>;
}