Photonix UI - React Components, Templates & Figma Design System

FileUpload

A premium drag-and-drop component for file uploads with progress tracking and list management.

Preview

Drag and drop your files here or choose files

PDF, DOCX, ZIP. File size max 25 MB

Usage

import { FileUpload } from '@photonix/ultimate';

const [files, setFiles] = useState([]);

<FileUpload 
  files={files} 
  onFilesChange={setFiles}
  mediaType="image"
  accept="image/*"
/>

Component API

FileUpload

Prop	Type	Default	Description
files	`FileItem[]`	`-`	Controlled list of files
onFilesChange	`(files: FileItem[]) => void`	`-`	Callback when files change
accept	`string`	`-`	Accepted file types (e.g. "image/*, .pdf")
multiple	`boolean`	`true`	Allow multiple files selection
maxSize	`number`	`-`	Maximum file size in bytes
disabled	`boolean`	`false`	Disabled state
title	`string`	`-`	Custom title for drop zone
subtitle	`string`	`'JPG, PNG. File size max 25 MB'`	Custom subtitle for drop zone
className	`string`	`-`	Additional class name

Variants

Sizes

Use size variants to match the density of the surrounding layout. `lg` keeps the original upload surface, while `md` and `sm` provide more compact options.

Compact upload choose files

Fits tool panels and smaller forms

Medium upload choose files

A reduced footprint for denser forms

Default upload choose files

Preserves the original FileUpload size

Sizes

<FileUpload size="sm" files={files} onFilesChange={setFiles} />
<FileUpload size="md" files={files} onFilesChange={setFiles} />
<FileUpload size="lg" files={files} onFilesChange={setFiles} />

Media Types

Switch the component between generic files, images, and video uploads. This updates the icon language and default helper copy.

Documents and attachments choose files

PDF, DOCX, ZIP. File size max 25 MB

Image upload choose files

JPG, PNG, WebP. File size max 25 MB

Video upload choose files

MP4, MOV, WebM. File size max 250 MB

Media Types

<FileUpload mediaType="file" files={files} onFilesChange={setFiles} />
<FileUpload mediaType="image" accept="image/*" files={files} onFilesChange={setFiles} />
<FileUpload mediaType="video" accept="video/*" files={files} onFilesChange={setFiles} />

Square Variant

Use the square variant for avatar pickers, cover uploads, and media-first flows. Selected items switch to Attachment cards automatically.

Image choose file

JPG, PNG

Video choose file

MP4, MOV

Square Variant

<FileUpload
  variant="square"
  size="lg"
  mediaType="image"
  multiple={false}
  accept="image/*"
  files={files}
  onFilesChange={setFiles}
/>

Multiple vs Single

Control whether users can upload one or multiple files. In single mode, the drop zone is hidden once a file is selected.

Default (Multiple) choose files

PDF, DOCX, ZIP. File size max 25 MB

Single Mode choose file

Selecting a file replaces the current one

Multiple vs Single

// Multiple mode (Default)
<FileUpload multiple={true} files={files} onFilesChange={setFiles} />

// Single mode
<FileUpload multiple={false} files={singleFile} onFilesChange={setSingleFile} />

File Items & Status

Demonstrates how different file statuses (Uploading, Success, Error) are rendered in the list.

Upload Progress choose files

PDF, DOCX, ZIP. File size max 25 MB

presentation.pdf0 B

vacation-photo.jpg

large-video.mp4File size exceeds 25MB limit

File Items & Status

const files = [
  { id: '1', file: file1, status: 'success', progress: 100 },
  { id: '2', file: file2, status: 'uploading', progress: 45 },
  { id: '3', file: file3, status: 'error', error: 'Size limit exceeded' }
];

<FileUpload files={files} onFilesChange={setFiles} />

Accepted File Types

Restrict uploads to specific file types using the standard HTML accept attribute.

Images Only choose files

Only PNG and JPG files are allowed

Accepted File Types

<FileUpload 
  title="Images Only" 
  accept="image/png, image/jpeg" 
  subtitle="Only PNG and JPG files are allowed" 
  files={files} 
  onFilesChange={setFiles} 
/>

States

The disabled state prevents all interactions including dragging and clicking.

Upload Disabled choose files

PDF, DOCX, ZIP. File size max 25 MB

States

<FileUpload disabled title="Upload Disabled" />

FileUpload

Preview

Component API

FileUpload

Variants

Sizes

Media Types

Square Variant

Multiple vs Single

File Items & Status

Accepted File Types

States

On this page