File Upload

Upload, validate, and queue documents with drag-and-drop, file type rules, progress states, and retry handling.

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

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

export function FileUploadExample() {
  return (
    <div className="rounded-xl border bg-background p-4">
      <FileUpload />
    </div>
  );
}

Installation


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

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

CSV Viewer Human Review

On This Page

Installation Useful behaviors API Reference FileUpload

Deploy your document processing on Extend

Trusted by Brex, Flatiron, Square, and more.

Extend provides production ready tools to handle your toughest documents.