#FileUpload

Attaches files to a form and checks their type, size and count before accepting them — the drop Area when attaching is the main task on the screen, the "Select file" button when space is tight. Picking never uploads: files travel with the form when it is saved, and the product marks a row loading while it sends one. To pick a photo by clicking an avatar, see Data Display/Avatar → Click To Upload.

Source · Storybook

#Usage

import { FileUpload, FileUploadDropzone, FileUploadError } from '@wallarm-org/design-system/FileUpload';

#Examples

#Button trigger

The same picking and checks behind a "Select file" button that hugs its label, for when a 96px Area would crowd the form.

#In field

Inside Field: the label names the Area, and the description carries the format and the limit.

#Multiple

With maxFiles above one the picker stays and disables once the limit is reached, while each file stacks below it as its own row.

#Single file chosen

One file allowed and chosen: the file shows below the picker, and a new pick, or Replace in the row, swaps it.

#With description

description adds a second line to the row for size or status — here, that the file goes with the form.

#Uploading

A row marked loading dims and shows a spinner, and the picker locks until no row is loading; its X becomes "Cancel upload", and stopping the request is up to the product.

#Validation

Only .so / .dylib up to 32 KB: anything else is refused inline, naming the file and the rule.

#Disabled

Disabled: nothing responds, and the Area and the row actions dim.

#Read only

Read-only removes the picker, Replace and Delete, while a custom FileUploadItemAction such as Download stays.

#Stored file

A file already on the server is a row too: FileUploadItem works outside FileUpload from a name and size, and its actions only run your onClick.

#Long file name

Long names truncate; hover shows the full name.

#Form submission

Nothing uploads on pick: the file travels in the form's FormData under name, and an empty submit of a required Field shows its error.

#Props

#FileUploadDropzone

#FileUploadError

#FileUploadItem

#FileUploadItemAction

#FileUploadItemDeleteTrigger

#FileUploadItemGroup

#FileUploadItemReplaceTrigger

#FileUploadTrigger