Dropzone

The file upload entry: drag-and-drop or click, accepted types, and the compact single-row shape both apps ship.

Files, the job-creation flow

The dropzone as its own card, dashed row over a borderless surface. Full provenance at patterns/compact-dropzone.

Files

2 selected

Drag files here, or click to browseNew uploads land in Files too, so other jobs can reuse them.

brake-pads-q3.xlsx412 KB
fitment-update.csv88 KB

Upload entry, start to finish

Drop files, review the queue with a per-file remove, Start ingest disabled until one is queued

Drag files here, or click to browse

New uploads land in Files too, so other jobs can reuse them.

lighting-skus-master.xlsx356 KB

lighting-fitment.csv74 KB

Accepted types and rejection

Only .csv and .xlsx are accepted; anything else reports inline through the zone's own error slot

Upload a file

Drop a .csv or .xlsx, anything else reports inline

Reading files

loading spins the Browse button and swaps the headline to a present-tense verb phrase

Drag files here, or click to browse

Click here or drag here to upload

Locked during a run

disabled paired with a Tooltip, so a dead zone still explains why

Upload paused

This job is running, files can't be added right now

Per-file progress

A determinate Progress bar per queued file once it has a known extent, not a bare spinner

Upload a file

Click here or drag here to upload

brake-chassis-catalog.xlsx30%

Two skins, one slot map

Compact tinted row versus tall dashed panel, same three slots

Add parts or attributesDrop a file, or browse

Bring your catalog

Any spreadsheet works, we map the columns after

Default, full size

Drag a file over for the highlight border, or click to browse: selected files list below

Upload a file

Click here or drag here to upload

Two-line hint

hint is free-form JSX: a second caption line is just a <br /> away

Upload a file

Click here or drag here to upload
Supported file types .csv, .xlsx

maxSize rejection

Oversized files are filtered before onFiles fires; a note explains why

Upload a file

Drop any file, the 1KB cap here rejects it and explains why

Native-form mode

name posts the files under a real field; autoSubmit fires the form on drop, the speedway FileDrop contract

Styling slots

Every className the component exposes, and what it reaches

className: the dashed container
hintClassName: the instruction copy
browseClassName: the Browse button