File Upload

A keyboard-accessible drag-and-drop upload surface with extension and file-size validation, an animated perimeter progress indicator, and a completion callback for connecting your own storage layer.

Drag and drop to upload or select

PDF, JPG, PNG, XLSX (max 8 MB)

Uploading ...

Uploaded successfully!

Installation

You can add the file upload component using our CLI or manually:

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add file-upload

Validation

Configure accepted file types with allowedExtensions and the size ceiling with maxBytes. The component updates its own helper text and rejection message from those props.

<FileUpload allowedExtensions={["pdf", "png"]} maxBytes={4 * 1024 * 1024} onUploadComplete={saveFile}/>

File icon

The built-in icon follows the selected extension. Use renderFileIcon when your product has its own file-type artwork or icon system.

import { RiFileCloudLine } from "@remixicon/react"; <FileUpload renderFileIcon={() => ( <RiFileCloudLine className="size-6 text-foreground-icon-secondary" aria-hidden /> )}/>