File Upload

File upload components provide a complete upload experience with drag-and-drop support and progress tracking.

File Upload Playground

Preview

Code

Upload Documents

PDF, PNG, or JPG up to 10 MB

Download Sample File

Controls

Sample Link:

Multiple:

Disabled:

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

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 } from '@versaui/ui/components/FileUpload';
import { FileUploadProgress } from '@versaui/ui/components/FileUpload';
// Upload area
<FileUploadArea
  title="Upload your documents"
  description="PDF format, maximum 10 MB"
  onFilesSelected={(files) => handleUpload(files)}
/>
// Progress indicator
<FileUploadProgress
  fileName="document.pdf"
  fileSize={1048576}
  fileType="application/pdf"
  onComplete={() => showSuccess()}
  onCancel={() => cancelUpload()}
/>

Accessibility

Drag-and-drop area is keyboard accessible via the Browse button
Upload progress announced via aria-live region
File input uses proper labeling for screen readers

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.
`browseButtonText`	`string`	`'Browse Files'`	Browse button label.
`accept`	`string`	`—`	Accepted MIME types (e.g. "image/png").
`multiple`	`boolean`	`false`	Allow multiple file selection.
`onFilesSelected`	`(files: FileList) => void`	`—`	Callback when files are selected.

FileUploadProgress Props

Prop	Type	Default	Description
`fileName`	`string`	`—`	Name of the file being uploaded.
`fileSize`	`number`	`—`	File size in bytes.
`fileType`	`string`	`—`	MIME type of the file.
`initialStatus`	`'uploading' \| 'uploaded' \| 'failed'`	`'uploading'`	Initial upload status.
`errorMessage`	`string`	`'Upload Failed'`	Error message on failure.
`onComplete`	`() => void`	`—`	Callback when upload completes.
`onRetry`	`() => void`	`—`	Callback to retry failed upload.