File Upload

A set of components including drop areas, previews, and progress indicators that handle file uploads.

File Upload Playground

Preview

Code

Upload Documents

PDF, PNG, or JPG up to 10 MB

Download Sample File

Controls

Upload Button:

Sample Link:

Multiple:

Disabled:

File Upload Progress Playground

Preview

Code

Project_Specification.pdf

0 B of 412 KB • 3 secs left

Uploading...

Controls

Icon Style:

Simple

Expressive

Status:

Uploading

Uploaded

Failed

File Type:

PDF

Image

Doc

Data

Installation

You can add the file upload component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install class-variance-authority clsx tailwind-merge @phosphor-icons/react @react-aria/focus @react-aria/interactions @react-aria/progress

Copy and paste the following code into your project.

FileUploadArea.tsx

FileUploadProgress.tsx

ContainedIcon.tsx

Button.tsx

LinkButton.tsx

ProgressBar.tsx

Material.tsx

Loader.tsx

cn.ts

Loading source code...

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

import { FileUploadArea, FileUploadProgress } from '@versaui/ui/components/FileUpload';

// Upload Drop Area
<FileUploadArea
  title="Upload your documents"
  description="PDF, PNG, or JPG up to 10 MB"
  onFilesSelected={(files) => console.log(files)}
/>

// Upload Progress Card
<FileUploadProgress
  fileName="document.pdf"
  fileSize={1048576}
  fileType="application/pdf"
  onComplete={() => console.log('Complete')}
  onCancel={() => console.log('Cancel')}
  onDelete={() => console.log('Delete')}
/>

File Upload Area

Drop Area Options

// Custom copy & restrictions
<FileUploadArea
  title="Upload contract"
  description="PDF files up to 5 MB"
  accept="application/pdf"
  uploadButtonText="Select PDF"
/>

// Multiple files
<FileUploadArea multiple onFilesSelected={(files) => console.log(files)} />

// Sample template link
<FileUploadArea
  showSampleLink
  sampleLinkText="Download Template"
  onSampleDownload={() => console.log('Download template')}
/>

// Disabled
<FileUploadArea disabled />

File Upload Progress

Statuses

Three upload statuses are supported — uploading, uploaded, and failed:

// Uploading (active progress bar)
<FileUploadProgress
  fileName="report.pdf"
  fileSize={412888}
  fileType="application/pdf"
  initialStatus="uploading"
/>

// Uploaded (completed)
<FileUploadProgress
  fileName="report.pdf"
  fileSize={412888}
  fileType="application/pdf"
  initialStatus="uploaded"
  onDelete={() => console.log('Delete')}
/>

// Failed (error message and retry)
<FileUploadProgress
  fileName="report.pdf"
  fileSize={412888}
  fileType="application/pdf"
  initialStatus="failed"
  errorMessage="Upload Failed"
  onRetry={() => console.log('Retry')}
/>

Icon Styles

Two visual styles for the file icon — simple (default) and expressive:

<FileUploadProgress iconStyle="simple" fileName="document.pdf" fileSize={512000} initialStatus="uploaded" />
<FileUploadProgress iconStyle="expressive" fileName="document.pdf" fileSize={512000} initialStatus="uploaded" />

Accessibility

Full keyboard support: press Enter or Space on the drop area or upload button to open the file selector
Progress updates and status changes announced to screen readers via aria-live
Visible high-contrast focus rings when navigated via keyboard
Clear semantic action buttons with accessible labels for cancel, retry, and delete

FileUploadArea Props

Prop	Type	Default	Description
`title`	`string`	`'Drag and drop a file here'`	Heading text in the drop zone.
`description`	`string`	`'File type must be PDF, PNG or JPG under 5 MB'`	Subtext describing accepted files.
`uploadButtonText`	`string`	`'Upload Files'`	Upload button label.
`showUploadButton`	`boolean`	`true`	Show or hide the upload button.
`showSampleLink`	`boolean`	`true`	Show or hide the sample file download link.
`sampleLinkText`	`string`	`'Download Sample File'`	Sample download link label.
`accept`	`string`	`—`	Accepted MIME types or extensions.
`multiple`	`boolean`	`false`	Allow multiple file selection.
`disabled`	`boolean`	`false`	Disable the upload area.
`width`	`number \| string`	`600`	Width of the upload area container.
`onFilesSelected`	`(files: FileList) => void`	`—`	Callback when files are selected or dropped.
`onSampleDownload`	`() => void`	`—`	Callback when the sample link is clicked.
`className`	`string`	`''`	Additional CSS class names.
`style`	`React.CSSProperties`	`—`	Additional inline styles.

FileUploadProgress Props

Prop	Type	Default	Description
`fileName`	`string`	`—`	Name of the file being uploaded.
`fileSize`	`number`	`—`	File size in bytes.
`fileType`	`string`	`—`	MIME type or format of the file.
`iconStyle`	`'simple' \| 'expressive'`	`'simple'`	Visual style for the file icon.
`initialStatus`	`'uploading' \| 'uploaded' \| 'failed'`	`'uploading'`	Initial upload status.
`errorMessage`	`string`	`'Upload Failed'`	Error message displayed on failure.
`uploadSpeed`	`number`	`200000`	Simulated speed in bytes per second.
`simulateProgress`	`boolean`	`true`	Whether to simulate progress automatically.
`width`	`number \| string`	`600`	Width of the progress card.
`onComplete`	`() => void`	`—`	Callback when upload completes.
`onCancel`	`() => void`	`—`	Callback when cancel is clicked.
`onDelete`	`() => void`	`—`	Callback when delete is clicked.
`onRetry`	`() => void`	`—`	Callback to retry failed upload.
`className`	`string`	`''`	Additional CSS class names.
`style`	`React.CSSProperties`	`—`	Additional inline styles.

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

On this page