Wave 3

File Upload

Pick files by clicking, keyboard or drag and drop, with a list of selected files.

Avatars or images that need cropping: build a dedicated picker.

Install

Terminal

pnpm dlx shadcn@latest add @acme/file-upload

Or import from the package: import { FileUpload } from '@acme/react'

Examples

Upload basic

Receipts

Choose files or drag them here

PDF, PNG or JPG, up to 10 MB each.

file-upload-basic.tsx

'use client'

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

export default function FileUploadBasic() {
  return (
    <FileUpload
      className="w-full max-w-md"
      label="Receipts"
      description="PDF, PNG or JPG, up to 10 MB each."
      accept=".pdf,image/png,image/jpeg"
      multiple
      maxSizeMb={10}
      name="receipts"
    />
  )
}

Props

File Upload props
Prop	Type	Default	Description
label (required)	string	—	Visible label; names the file input.
description	string	—	Allowed types and sizes.
accept	string	—	Accepted file types.
multiple	boolean	false	Allow several files.
maxSizeMb	number	—	Reject larger files with an error.
name	string	—	Form field name.
onFilesChange	(files: File[]) => void	—	Called when the selection changes.

Keyboard
Key	Action
`Tab`	Focuses the drop area (the file input)
`Enter / Space`	Opens the file picker

Role: file input
You provide: label (enforced by TypeScript).
Built in: Drag and drop is optional; the native file input covers the area (WCAG 2.5.7).
Size errors are announced with role="alert" and linked to the input.
Each selected file has a named remove button.
WCAG 2.2 criteria: 1.3.1, 2.1.1, 2.5.7, 3.3.1

Don’t

Hide the allowed types and size until after an error.

Tokens