Component
File Upload
A drag and drop file upload zone with file list, progress, and validation. Uses the headless @refraction-ui/file-upload core.
Examples
Drag files or click to upload. Accepts images and PDFs.
📁
Drag & drop files here, or click to select
Accepted: image/*,.pdf
Max size: 10.0 MB
Installation
$
pnpm add @refraction-ui/react-file-uploadUsage
tsx
import { FileUpload } from '@refraction-ui/react-file-upload'
export function MyComponent() {
return <FileUpload onFilesChange={(files) => console.log(files)} accept="image/*" maxFiles={3} />
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
onFilesChange | (files: FileEntry[]) => void | -- | Callback when files change. |
accept | string | -- | Accepted file types. |
maxFiles | number | -- | Maximum number of files. |
maxSize | number | -- | Maximum file size in bytes. |
className | string | -- | Additional CSS classes. |