FileUpload

A flexible file upload component supporting multiple variants including basic, button-triggered, dropzone, circle dropzone, preview gallery, and control sizing examples.

Overview

• Variants: basic, button, dropzone, circle, preview, control-sizing
• Multiple files supported
• Accept filters
• Disabled state
• Preview thumbnails with remove actions

Props

Prop	Type	Default	Description
variant	'basic' | 'button' | 'dropzone' | 'circle' | 'preview' | 'control-sizing'	'basic'	Visual/behavior mode
onChange	(eventLike) => void	-	Called with { target: { files } } (for dropzone) or native event
value	File[]	[]	Selected files (controlled)
accept	string | object	-	Accept filter (MIME/extension)
multiple	boolean	false	Allow multiple selection
disabled	boolean	false	Disable interaction
className	string	''	Additional classes
onRemove	(index: number) => void	-	Remove handler (used by preview/control-sizing)
...props	any	-	Spread to underlying inputs

Variants

Basic

Displays a read-only text field with the selected file name(s) and a transparent overlay file input.

<FileUpload variant='basic' value={files} onChange={(e) => setFiles(Array.from(e.target.files))} />

Button

Triggers the hidden file input via a button.

<FileUpload variant='button' value={files} onChange={(e) => setFiles(Array.from(e.target.files))} />

Dropzone

Drag & drop area using react-dropzone.

<FileUpload variant='dropzone' value={files} onChange={(e) => setFiles(Array.from(e.target.files))} accept='image/*' multiple />

Circle Dropzone

Circular drag & drop area.

<FileUpload variant='circle' value={files} onChange={(e) => setFiles(Array.from(e.target.files))} accept='image/*' />

Preview (Multiple Files with Thumbnails)

Shows image previews and supports removing individual items.

<FileUpload variant='preview' value={files} onChange={(e) => setFiles(Array.from(e.target.files))} onRemove={(idx) => setFiles((prev) => prev.filter((_, i) => i !== idx))} multiple />

Control Sizing (Example Controls)

Demonstrates large/default/small control sizes with integrated file buttons.

<FileUpload variant='control-sizing' onRemove={(index) => console.log('remove index', index)} />

Examples (from FileUploadPage)

• Basic upload, Button, Dropzone, Circle, Preview, Control sizing

Accessibility

• Ensure buttons and interactive elements have accessible labels (e.g., "Browse")
• Provide accept filters to guide selection
• For preview grids, include alt text or aria-labels for remove buttons
• Keep dropzone focusable and provide focus styles

Best Practices

1. Validate file types/sizes on the server and client
2. Revoke object URLs when unmounting previews to avoid memory leaks
3. Use multiple for batch uploads and reflect count/state in UI
4. Provide clear errors and progress feedback in real flows
5. Prefer accept filters to improve UX