File Upload

FREE

Drag-and-drop zone with type and size validation, image previews, file list and progress bars.

Playground

Change the props and watch the component and its code update live.

Drop files here or browseimage/* · max 5.0 MB

Props

Accepted types

Multiple

Max size (MB)

Max files

Accent color

Code

import { FileUpload } from "@/components/ui/file-upload";

<FileUpload
  accept="image/*"
  maxFiles={4}
  maxSize={5 * 1024 * 1024}
  onValueChange={(files) => upload(files)}
/>

Installation

Terminal

npx @bloxa/cli add file-upload
# or: npx shadcn@latest add @bloxa/file-upload

Examples

Images with progress

Drop images to see previews and a simulated upload progress.

Drop files here or browseimage/* · max 5.0 MB

Single file

Upload your CV — choose a PDFPDF only, up to 10 MB

API reference

Every component also accepts the props of the element it renders.

FileUpload

Prop	Type	Default	Description
value / defaultValue	File[]	—	Selected files.
onValueChange	(files: File[]) => void	—	Called when files change.
accept	string	—	Allowed types, e.g. "image/*,.pdf".
multiple	boolean	true	Multiple files.
maxSize	number	—	Max size per file in bytes.
maxFiles	number	—	Maximum number of files.
progress	Record<string, number>	—	Upload percentage by file name (0–100).
labels	{ title?, browse?, hint?, ... }	—	UI strings (for translation).