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:

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

CLI

Manual

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    />  )}/>