UX Engineered Upload Flow

Dropzone

Useaccept

with a native input accept string such as "image/*,application/pdf" to restrict types.

maxSize={50}

is the limit in megabytes, and is echoed in the helper text automatically.

Upload states

status

drives the whole row — idle, uploading, paused, error and success each pick their own colours, icon and messaging.

onRetry

is what the inline Retry button calls after an error; onRemove backs the X.

Simple file input

For a form that just needs files attached: the Input block in file mode, with previews and removal built in.

Settype="file"

on InputBlock to turn the field into a drag-and-drop zone with previews.

onFilesChange

returns native File[] on drop, selection and removal.

multiple

and accept pass through; accept takes the standard HTML string such as "image/*".

Folder drop target

The Folder block as an upload surface, tinted with the theme colour: drop files on it or click to browse. It starts empty, each dropped file becomes a card with its own progress bar, the pocket tracks the overall figure, and an × removes a file.

Setinteractive

to enable drag-and-drop and click-to-browse. onFiles receives the dropped or picked File[]; accept and multiple pass through to the input.

peek={0}

keeps the folder empty until the first drop — without it the folder shows three placeholder cards peeking out.

progress

drives the bar across the pocket (0–100); a per-file progress draws a bar on that card. onRemoveFile adds an × to each fanned card.

color

defaults to a soft tint of --primary (lightness 0.88, chroma at 40%), so the folder — body, pocket, icon and the peeking cards — follows your theme preset and the colour picker above without going heavy. Pass any CSS colour to pin one.