Primitive

Dropzone

Dashed upload target primitive with active, disabled, icon, and descriptive states.

Dropzone is a visual target and label surface. Product code or a higher-level upload component owns file transport and storage.
form
DOM renderImage render
DropzoneDefault
Upload filesDrag or choose a research artifact.Choose files

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Passive upload target.
Upload filesDrag or choose a research artifact.Choose files
Render state

Active

Drag-over state.
Ready for filesRelease to add this packet to the queue.Drop to attach
Render state

Image

Image-specific icon and copy.
Upload imagesDrop interface references or choose from disk.Choose images
Render state

Disabled

Locked upload target.
Upload filesFile input is locked for this review.Uploads locked
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
titleReactNodeUpload filesPrimary drop target label.
descriptionReactNode-Secondary drop target copy.
actionLabelReactNode-Optional visible browse action label.
iconIconNameuploadGlyph shown in the circular affordance.
activebooleanfalseHighlights drag-over state.
disabledbooleanfalseLocks the target visually and functionally.