File Upload is the starting point for document processing workflows. It should help users get files into the system quickly while making validation, progress, and failure states clear.
Click to upload or drop files
PDF, DOCX, XLSX, CSV, PNG, or JPG
Browse files
Installation
pnpm dlx shadcn@latest add @extend/file-upload
Useful behaviors
- Drag-and-drop and file picker entrypoints.
- File type, size, page count, and duplicate validation.
- Upload progress, cancel, retry, and queued states.
- Batch upload summaries for mixed PDFs, DOCX files, Excel workbooks, images, and CSVs.
- Hooks for parsing, extraction, review, or routing once files are accepted.
API Reference
FileUpload
The FileUpload component renders a drag-and-drop file picker, validates accepted files, and keeps an internal upload queue unless you mirror it through callbacks.
| Prop | Type | Default | Required |
|---|---|---|---|
accept | string | - | No |
acceptedFileTypes | AcceptedFileType[] | Image, PDF, and Sheet icons | No |
borderBeamTheme | React.ComponentProps<typeof BorderBeam>["theme"] | "light" | No |
browseLabel | string | "Browse files" | No |
className | string | - | No |
description | string | "PDF, DOCX, XLSX, CSV, PNG, or JPG" | No |
draggingLabel | string | "Drop to add" | No |
multiple | boolean | true | No |
showBorderBeam | boolean | true | No |
showFileList | boolean | true | No |
title | string | "Click to upload or drop files" | No |
onFilesAccepted | (files: File[]) => void | - | No |
onFilesChange | (files: FileUploadItem[]) => void | - | No |