FORMS · FORM ELEMENTS

File Upload

Dropzones, queues, previews, crop, folders and CSV import. Real file inputs and drag-and-drop — the server is simulated.

THEME

DENSITY

Playground

View, count, accepted types, limits, state — live

PREVIEWLive

Project files Drop files here or browsePNG, JPG, GIF or WebP · up to 25 MB · max 5 filesor paste a screenshot ⌘ V

ACCESSIBILITY TREE

rolebutton (file input inside a label)

name"Project files — PNG, JPG, GIF or WebP · up to 25 MB · max 5 files"

description"PNG, JPG, GIF or WebP · up to 25 MB · max 5 files"

filesnone

live region—

Settings

VIEW

FILES

MAX SIZE

MAX FILES

STATE

CODE

<input type="file" multiple accept="image/*" aria-describedby="files-hint"/><p id="files-hint">PNG, JPG, GIF or WebP · up to 25 MB · max 5 files</p>// validate: size ≤ 25 MB, count ≤ 5, no duplicates

Variants

7 uploaders, all working with real files

Dropzone + listdrag · browse · ⌘V · pause · cancel · retry

Drop files here or browseAny file · up to 100 MB each · max 12 filesor paste a screenshot ⌘ V

Image gridlive thumbnails · drag to reorder · first is cover

Drop images here or browseJPG, PNG or WebP · up to 20 MB · drag tiles to reorderor paste a screenshot ⌘ V

No images yet

Avatar with cropzoom · drag to reposition · live previews

Choose a photo to crop

Zoom · —

Choose photo

Attach buttonchips · like an email or chat

Hi Ben — final dielines and the shelf mock-ups are attached.

AttachUp to 6 files, 25 MB total

Compact rowsingle file · replace · remove

Signed contract (PDF)

No file chosenBrowse

PDF, up to 10 MB

Whole folderwebkitdirectory · keeps the tree

Choose a folder

No folder yet

Structure is kept on upload

CSV importpreview · map columns · flag bad rows

Choose CSV

States

Dropzone and file row

IDLE

FOCUS

DRAG-OVER

DRAG-REJECT

UPLOADING

DISABLED

File row statesqueued → uploading → paused / error → done

PDF

Tea_250g.pdfQueued

3.2 MB

JPG

Shelf_mockup_01.jpg58%

2.8 MB / 4.8 MB · 3.4 MB/s · 1 s left

MP4

Teaser_cut.mp4Paused

15.6 MB of 46.0 MB · resumes where it stopped

Packaging_master.aiFailed

Connection lost at 61% · press Retry

PDF

Brand_guidelines.pdf✓ Uploaded

18.2 MB

PDF

Old_draft.pdfCancelled

2.0 MB

Speczone · row · limits

Dropzone2 px dashed border at 26% · 18 px radius · 44 px icon plate

Drag-overCyan border, 10% cyan fill, icon plate turns solid cyan, scale 1.01

Drag-rejectCoral border and fill — decided from the dragged MIME type

File row38 px type tile or thumbnail · 5 px progress · 30 px icon actions

ProgressCyan uploading · amber paused · coral failed · green done

LimitsAlways visible under the title, linked with aria-describedby

Behavior

Validation, queue, network failure, keyboard

Validate before uploadtype · size · count · duplicates

Drop files here or browseImages or PDF · up to 5 MB · max 4 · no duplicates

EnterOpen the file pickerSpaceOpen the file pickerDeleteRemove or cancel a row⌘ VPaste a screenshot

Queuemax N at once · overall progress

PARALLEL

Queue is empty — add files to watch them flow

Network failuredrops at 60% · auto-retry in 3 s · manual retry

The upload drops at 60%, like a flaky café Wi-Fi

In Avava

Client delivery, studio logo, invoice attachments

Deliver files to the clientLume · Final files · version 4

Lume Goods/Packaging refresh/Final files · v4

Drop files here or browseAny file · up to 200 MB each · folders welcomeor paste a screenshot ⌘ V

No files in this version yetNote for Ben

Add at least one file to send

Studio logopreview updates everywhere at once

ΛV

Studio logoSquare PNG or SVG · up to 2 MB

ΛVAvava StudioSidebar · dark

ΛVAvava StudioInvoice · light

Invoice attachmentsPDF only · 10 MB · up to 3

Attach PDF0 of 3 · PDF up to 10 MB

Rules & a11y

When to use what, keyboard, visible limits

Dropzone or button?match how often people upload

Dropzone

Uploading is the main taskDeliverables, galleries, bulk import

Button

Occasional, secondary uploadAttach to a comment or invoice

Avatar

One image with a fixed shapeProfile photo, workspace logo

Compact row

One required document in a formContract, ID, certificate

Folder

Structure mattersFinal files, asset libraries

Screen readers & keyboarda real input does the heavy lifting

✓<label> wraps <input type="file">Keyboard and screen readers get a real, focusable control

✓aria-describedby → limitsTypes, size and count are read before choosing

✓aria-live="polite"Announces added, rejected and finished files

✓role="progressbar" per filearia-valuenow updates; the label is the file name

✓Delete on a focused rowCancel or remove without hunting for the icon

✓Errors next to the fileEach rejected file says why — never a generic toast

Limits people can seesay it before they choose

✕ HIDDEN RULESDrop files hereError after 40 s of uploading: “File too large”.

✓ RULES UP FRONTDrop files here or browsePNG, JPG or PDF · up to 25 MB each · max 10 files

DO✓Show accepted types, size and count before people choose✓Validate on the client and say why per file✓Let people pause, cancel and retry each upload✓Resume from where it dropped after a network error✓Keep a real file input — the zone is just a bigger label

DON’T✕Start uploading files that will be rejected anyway✕Hide the browse option behind drag-and-drop✕Clear the whole queue when one file fails✕Block the form while unrelated files upload✕Use colour alone for failed or done rows