File Upload

Upload assetimages, .pdf

Images or PDF up to 5 MB

Attach filesAny file

Add up to 5 workspace files

Review queue.pdf, .csv, .png

Compact feedback for files already added

product-roadmap.pdf
410.2 KB
Ready
customer-import.csv
175.8 KB
Uploading
brand-video.mov
9.3 MBLarger than 5 MB
Invalid

Default.pdf

Inset surface

Outline.csv

Clear border

Ghost.png

Quiet upload

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/file-upload.json

Usage

import { FileUpload } from '@/components/matos-ui/file-upload'

<FileUpload
  files={files}
  onFilesChange={setFiles}
  accept="image/*,.pdf"
  maxSize={5 * 1024 * 1024}
/>

Reference

Props

Prop	Type	Default
`files`	`FileUploadFile[]`	— (uncontrolled if omitted)
`onFilesChange`	`(files: FileUploadFile[]) => void`	—
`accept`	`string`	—
`multiple`	`boolean`	`false`
`maxSize`	`number`	—
`maxFiles`	`number`	—
`title`	`string`	`"Drag and drop your files"`
`description`	`string`	`"or click to select a file"`
`disabled`	`boolean`	`false`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`variant`	`"default" \| "outline" \| "ghost"`	`"default"`

Interfaces

export interface FileUploadFile {
  file: File
  id: string
  error?: string
}

FileUpload forwards standard props to <div role="button">. Internally it renders an <input type="file" className="sr-only" />.

Also exported: fileUploadVariants with slots root / icon / title / description / fileList / fileItem / fileName / fileSize / removeButton / errorText for easy customisation via tailwind-variants.