File upload

React v2

Package-backed FileUpload parts, drop zone, progress items, and formatter. Products retain ownership of transport and persistence.

Specimen

Guidelines

Code

Demo

hero

or drag and drop

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

Component

hint

allowsMultiple

isDisabled

import { FileUpload } from "@parentsquare/squarekit-react-v2/file-uploaders"; // 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

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

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

FileUpload.Root

or drag and drop

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

FileUpload.DropZone

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

FileUpload.List

Tech design requirements.pdf
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
200 KB
Uploading...
40%

ListItemProgressBar, fileIconVariant default

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

ListItemProgressBar, fileIconVariant gray

Tech design requirements.pdf
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
Complete
100%
Dashboard recording.mp4
16 MB
Uploading...
40%
Dashboard prototype FINAL.fig
4 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 MB
80%

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

Content

cells

The hint

or drag and drop

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

no hint: the kit’s default

or drag and drop

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

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
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

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

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

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

disabled: isDisabled

ListItemProgressBar

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

uploading: progress 20, 40 KB of 200 KB

Tech design requirements.pdf
200 KB
Complete
100%

complete: progress 100, the bar full

Tech design requirements.pdf
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
200 KB
Uploading...
0%

bar item, progress 0

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

bar item, progress 40

Tech design requirements.pdf
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