File upload

Choose files and watch them arrive: a FileUpload object with five parts, three item states, five zone states — and no uploading of its own.

Specimen

Guidelines

Code

Demo

hero

or drag and drop

Component

hint

allowsMultiple

isDisabled

import { FileUpload } from "@/components/application/file-upload/file-upload-base"; // Wire onDropFiles to your upload; see the Code tab for the two // rejection handlers, which are what turn the invalid state on. <FileUpload.DropZone onDropFiles={upload} />

In context

in-context

View in a page

Family

family

or drag and drop

Tech design requirements.pdf
40 KB of 200 KB
Uploading...
20%

FileUpload.Root

or drag and drop

FileUpload.DropZone

Dashboard recording.mp4
16 MB
40%
Dashboard prototype FINAL.fig
4.2 MB
80%

FileUpload.List

Tech design requirements.pdf
40 KB of 200 KB
Uploading...
20%

FileUpload.ListItemProgressBar

Tech design requirements.pdf
200 KB
40%

FileUpload.ListItemProgressFill

200 KB

getReadableFileSize

Types

cells

The two items across the three icon variants.

Tech design requirements.pdf
80 KB of 200 KB
Uploading...
40%

ListItemProgressBar, fileIconVariant default

Tech design requirements.pdf
80 KB of 200 KB
Uploading...
40%

ListItemProgressBar, fileIconVariant gray

Tech design requirements.pdf
80 KB of 200 KB
Uploading...
40%

ListItemProgressBar, fileIconVariant solid

Tech design requirements.pdf
200 KB
40%

ListItemProgressFill, fileIconVariant default

Tech design requirements.pdf
200 KB
40%

ListItemProgressFill, fileIconVariant gray

Tech design requirements.pdf
200 KB
40%

ListItemProgressFill, fileIconVariant solid

Layouts

cells

Breakpoint

or drag and drop

PDF, PNG, or JPG, up to 10 MB

the zone at the page’s width, live

the zone at phone width, a real viewport

Beside an avatar

or drag and drop

SVG, PNG, or JPG (max. 800×400px)

single-image zone beside the avatar; a button below md

or drag and drop

SVG, PNG, or JPG (max. 800×400px)

the same, featured icon hidden by className

Compositions

cells

Root, DropZone, a List of three; delete one, the rest slide up.

or drag and drop

SVG, PNG, JPG or GIF (max. 800x400px)

Tech design requirements.pdf
200 KB of 200 KB
Complete
100%
Dashboard recording.mp4
6.4 MB of 16 MB
Uploading...
40%
Dashboard prototype FINAL.fig
3.4 MB of 4.2 MB
Uploading...
80%

a List of bar items: the kit’s upload modal

or drag and drop

SVG, PNG, JPG or GIF (max. 800x400px)

Tech design requirements.pdf
200 KB
100%
Dashboard recording.mp4
16 MB
40%
Dashboard prototype FINAL.fig
4.2 MB
80%

a List of fill items: the kit’s upload slideout

Content

cells

The hint

or drag and drop

no hint: the kit’s default

or drag and drop

hint an empty string: the default again

or drag and drop

PDF, PNG, or JPG, up to 10 MB

a real constraint

or drag and drop

PDF, PNG, JPG, or GIF, up to 10 MB each and 50 MB in all; scanned documents should be at least 300 dpi

a long hint wraps

A long name

Q3 marketing site redesign and rebrand, tech design requirements, final review copy.pdf
80 KB of 200 KB
Uploading...
40%

bar item, the name truncates

Q3 marketing site redesign and rebrand, tech design requirements, final review copy.pdf
200 KB
40%

fill item, the name truncates

File types

Tech design requirements.pdf
200 KB
40%

type pdf

Tech design requirements.pdf
200 KB
40%

type mp4

Tech design requirements.pdf
200 KB
40%

type fig

Tech design requirements.pdf
200 KB
40%

type png

Tech design requirements.pdf
200 KB
40%

type docx

Tech design requirements.pdf
200 KB
40%

type zip

Tech design requirements.pdf
200 KB
40%

a MIME type, image/png

Tech design requirements.pdf
200 KB
40%

type unset: the blank sheet

Loading

cells

Cells

one row, in its own list

three rows in a list

States

cells

The zone

or drag and drop

keyboard focus, live: tab to the input, then the link

or drag and drop

Drag a file over this zone

drag-over, live: drag a file over the zone

or drag and drop

PNG only, up to 10 KB

0 files rejected so far

invalid: drop anything but a small PNG

or drag and drop

disabled: isDisabled

ListItemProgressBar

Tech design requirements.pdf
40 KB of 200 KB
Uploading...
20%

uploading: progress 20, 40 KB of 200 KB

Tech design requirements.pdf
200 KB of 200 KB
Complete
100%

complete: progress 100, the bar full

Tech design requirements.pdf
0 KB of 200 KB
Failed

failed: Try again in place of the bar

ListItemProgressFill

Tech design requirements.pdf
200 KB
40%

uploading: progress 40, the cloud icon beside 40%

Tech design requirements.pdf
200 KB
100%

complete: progress 100, the check icon, the fill faded

Tech design requirements.pdf
Upload failed, please try again.

failed: the sentence, then Try again

Progress

Tech design requirements.pdf
0 KB of 200 KB
Uploading...
0%

bar item, progress 0

Tech design requirements.pdf
80 KB of 200 KB
Uploading...
40%

bar item, progress 40

Tech design requirements.pdf
160 KB of 200 KB
Uploading...
80%

bar item, progress 80

Tech design requirements.pdf
200 KB
0%

fill item, progress 0

Tech design requirements.pdf
200 KB
40%

fill item, progress 40

Tech design requirements.pdf
200 KB
80%

fill item, progress 80