Forms

FileUpload

Drop files or browse for them, with sizes, progress and errors in a list.

Ant Design: Upload, Upload.Dragger

import { FileUpload, DropZone } from '@alea/ui';

Examples

Drop or browse; wrong types and big files are flagged.

Drop your logoPNG or SVG, up to 2 MB

Multiple files with a size limit; each can be removed with the keyboard.

AttachmentsPDF or images, up to 10 MB each

Drop files or browse for them, with a list that shows size, progress and errors (Ant's Upload.Dragger).

Prop	Type	Default	Description
`accept`	`string[]`	-	Accepted types, e.g. ['image/png', '.svg'].
`allowsMultiple`	`boolean`	`true`	Pick or drop more than one. Default true.
`className`	`string`	-	Extra class names for the root element.
`description`	`ReactNode`	-	Help under it: types and size.
`files`	`UploadFile[]`	-	The files (controlled), with progress and errors you set.
`isDisabled`	`boolean`	-	Disables every part of it.
`label`	`ReactNode`	`'Drop files here'`	The text in the drop area.
`maxSize`	`number`	-	Largest size in bytes; bigger files are listed with an error.
`onChange`	`((files: UploadFile[]) => void)`	-	Called with the full new list when files are added or removed.

Show 4 React Aria props

A bare drop target, for custom layouts. Keyboard users get the button inside.

Prop	Type	Default	Description
`children`required	`ReactNode`	-	The children of the component. A function may be provided to alter the children based on component state.

Keyboard and screen reader users use the Browse button; the drop area is also focusable.
Each file has a remove button named after the file.

Key	Does
`Enter` or `Space (on the zone)`	Opens the file picker
`Tab`	Moves to each file's remove button

Don't