File Upload
Drag-and-drop or click-to-browse file input with per-file progress indicators. Supports bar or fill progress styles, controlled file list, and remove actions.
{ FileUpload } from "@pepulux/ui"Empty drop zone
Default state — click the zone or drag files onto it. The accept prop restricts which file types are selectable.
PNG, JPG or SVG (max 5 MB)
With completed files
Pass files with status='complete' to show the completed queue.
SVG, PNG, JPG or GIF (max. 800×400px)
profile-photo.png
resume.pdf
Mixed — uploading + complete
Mix complete and uploading statuses to show a live queue. Each file row has its own progress bar.
SVG, PNG, JPG or GIF (max. 800×400px)
report-q2.pdf
dataset.csv
cover-art.jpg
Fill progress style
progressType='fill' renders a full-width background fill instead of a progress bar row.
SVG, PNG, JPG or GIF (max. 800×400px)
report-q2.pdf
dataset.csv
cover-art.jpg
Accepting multiple file types
Set accept to any valid MIME type or extension list. The hint text informs the user.
PDF, CSV, or Excel files (max 25 MB)
Interactive — real file selection
Drop files or click to open the system file picker. Selected files appear instantly.
PNG, JPG, PDF, CSV (max 10MB)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| files | FileItem[] | [] | Controlled list of files shown below the drop zone |
| onUpload | (files: File[]) => void | — | Called with native File objects when user drops or selects files |
| onRemove | (id: string) => void | — | Called when user clicks the trash button on a file row |
| progressType | "bar" | "fill" | "bar" | bar shows a progress bar row; fill renders a background fill sweep |
| accept | string | — | HTML accept attribute — restricts file picker (e.g. 'image/*' or '.pdf,.csv') |
| maxSizeHint | string | — | Helper text shown in the drop zone below the CTA |
| className | string | — | Additional CSS classes on the wrapper |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| id* | string | — | Unique identifier for the file row |
| name* | string | — | File name shown in the row |
| size* | string | — | Human-readable file size (e.g. '1.2 MB') |
| type* | string | — | MIME type — used to determine the file type icon color |
| progress* | number | — | 0–100 progress percentage |
| status* | "uploading" | "complete" | "error" | — | Controls the progress display and check/spinner icon |