FileUpload

Forms · src/components/FileUpload/FileUpload.tsx

Takes files, by drop or by browsing.

Both routes, always. Drag and drop is not available to a keyboard user and is awkward on a phone, so the label is tied to a real file input and browsing is never the hidden path.

The chosen files are the consumer's state, not this component's: uploading is where retries, progress and failures live, and a component that owned the list would have to own those too.

Import

import { FileUpload } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
title	React.ReactNode
hint	React.ReactNode	The second line: how else to get a file in.
accept	string	Accept attribute, also printed as a line of guidance.
maxLabel	string	A size limit, in words. Printed beside accept.
multiple	boolean
invalid	boolean
files	UploadedFile[]	Files already chosen, listed under the drop zone. The consumer owns this list.
onFiles	(files: File[]) => void
onRemove	(file: UploadedFile, index: number) => void	Omit it and files cannot be removed - so only omit it when that is true.
className	string

Exported types

UploadedFile