Best for

Attaching files to a form — the zone, the live rows and the quota in one card

Anatomy

Dashed target that lights on drag · limits stated before the drop · a done row and a live one · Clear / Save footer

Best for

Profile and onboarding forms — one image with Replace and Remove, over a single-file zone

Anatomy

88px photo well · Upload / Replace / Remove · a second compact zone for a CV · its own limits

Best for

Files already uploaded — a row each, one of them failed and retryable

Anatomy

Header with a count pill · a row per file with its own state and actions · confirm before delete · Add files footer

Best for

A form that collects images — the zone and everything already attached, in one field

Anatomy

Field Header Label with required star · hint line · the drop zone · a grid of previews, each with replace and remove · Footer Hint Text

Best for

The transport itself — one row playing its own progress, pause and failure, with the controls to drive it

Anatomy

Type mark · name and bytes-of-total · its own bar · percent and state badge · pause, resume, retry, cancel, delete · the controls wrap to a second line when the row narrows

Best for

A whole batch on one row — a status bar for everything in flight, not one file

Anatomy

100px row · title, percent and state · a wash filling the row behind the content · a 6px bar along the bottom edge · pause, cancel, more, and a delete once it is done