File Upload

A dropzone for choosing files by drag and drop or the Browse button.

import { FileUpload } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { FileUpload } from '@basiiik/ui';

<FileUpload onFilesSelected={(files) => upload(files)} />

Example values were filled in for the required prop onFilesSelected: replace them with your own.
Values in braces are your own variables, handlers or data, such as const [open, setOpen] = useState(false).
Hover is not styled: the zone reacts to real drags (Dragging, or the dragging prop for documentation). Error is the error prop or files refused by accept / maxSize. Disabled uses the disabled attribute.
Compose with: button.
Storybook: Inputs/File Upload.

Props

Prop	Type	Notes
`title`	`ReactNode`
`hint`	`ReactNode`
`dragging`	`boolean`
`error`	`ReactNode`
`disabled`	`boolean`
`onFilesSelected` required	`(files: File[]) => void`

Other props

Prop	Type	What it does
`onFilesRejected`	`(rejections: FileRejection[]) => void`	Called with any files that were refused, and why.
`accept`	`string`
`multiple`	`boolean`
`maxSize`	`number`	Largest allowed file, in bytes.
`browseLabel`	`string`	Text of the browse button.
`draggingTitle`	`ReactNode`	Title shown while files are dragged over the zone.
`name`	`string`	Name for a form field. The chosen files are the app's to upload; this only sets the native input name.

States. Hover is not styled: the zone reacts to real drags (Dragging, or the dragging prop for documentation). Error is the error prop or files refused by accept / maxSize. Disabled uses the disabled attribute.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

Uploading documents or images where dropping is convenient

Do not use it when

A single small attachment (use a native file input)
Camera or paste-only flows

Rules for agents

Handle onFilesSelected to upload the files; the component only picks them and never uploads
Set accept, maxSize and multiple, and say the same limits in hint
Handle onFilesRejected and keep the rejection messages; the component explains each refused file in text
Show each chosen file as a File Item below the zone, with its upload progress and a remove button
Use error for a problem from the app, such as a failed upload or a required field left empty

Avoid

Making drag and drop the only way to add files; keep the Browse button
Rejecting files without saying why
Accepting any file type when the app can only handle some
A File Upload for a single small attachment in a short form (use a native file input)

Writing the content

Title says what to add: 'Upload documents', 'Add photos'
Hint lists the types and size limit: 'PDF or PNG, up to 10 MB'
Browse label is a verb: 'Browse files'
Use sentence case

Keyboard

Tab to the Browse button; Enter and Space open the file dialog
Dropping files is an enhancement and never the only path

Accessibility

The input is named by the title (aria-labelledby) and described by the hint and error (aria-describedby)
aria-invalid in Error
A polite live region announces files added and files rejected

Colour tokens it reads

color.bg.brand.subtlecolor.bg.disabledcolor.bg.mutedcolor.bg.subtlecolor.bg.surfacecolor.border.brandcolor.border.dangercolor.border.strongcolor.border.subtlecolor.icon.primarycolor.text.brandcolor.text.dangercolor.text.disabledcolor.text.primarycolor.text.secondary

inputs 4 Figma variants Try it in the live demo