File Uploader

Drag-and-drop file upload with image previews, progress animation, and validation.

Drop files here or click to browse

Accepted: .png, .jpg, .jpeg, .gif, .pdf · Max 5.0 MB · Up to 10 files

Code

import { FileUploader } from "@/components/ui/file-uploader"

export default function Example() {
  return <FileUploader />
}

Installation

$npx particleui-cli add file-uploader

TSX

import { FileUploader } from "@/components/ui/file-uploader"

export default function Example() {
  return <FileUploader />
}

Prop	Type	Default	Required
accept	Record<string, string[]>	—	no
maxSize	number	—	no
maxFiles	number	—	no
onUpload	(files: File[]) => void \| Promise<void>	—	no
className	string	—	no
disabled	boolean	—	no
files	UploadedFile[]	—	yes
onRemove	(index: number) => void	—	yes

Source filecomponents/ui/file-uploader.tsx

Typeui

Categoriesforms, blocks

npm dependenciesreact-dropzone

Registry deps

Claude skill—