Components

FileList

Display file names, sizes, upload progress, errors, and removal controls.

UploadFile type

Each file in the list is an UploadFile object with the following shape.

UploadFile props

Prop	Type	Default	Description
`id`	`string`	—	Unique identifier for the file row.
`name`	`string`	—	File name shown in the list.
`size`	`number`	—	File size in bytes (auto-formatted).
`status`	`FileStatus ("pending" \| "uploading" \| "done" \| "error")`	`"pending"`	Determines icon, progress bar, and error styling.
`progress`	`number`	—	Upload progress from 0 to 100 percent. Used only while status is uploading.
`error`	`string`	—	Error message shown when status is "error".

FileListProps props

Prop	Type	Default	Description
`files`	`UploadFile[]`	—	Files to display.
`onRemove`	`(id: string) => void`	—	Displays a remove button on each row and handles removal requests.

Files waiting to upload show a file icon and their size. The remove button is present when onRemove is provided.

FileList: pending

Files with status="uploading" show a progress bar driven by the progress value (0–100).

FileList: uploading

Completed uploads show a green checkmark icon and the file size.

FileList: done

Failed uploads show a warning icon (amber) and the error message instead of the file size. The entire row gets an error tint.

FileList: error

ImportTSX

import { FileList } from "@solarius/onset";
import type { UploadFile } from "@solarius/onset";