Upload input

Drag-and-drop file picker with per-file progress and error states. Aligned with J&J DS v1.2 (Figma 22473:14160). Use getStatus to surface upload progress (0–100) or an error per file.

Single-file

Drop a single file or click Browse

Show source

<UploadInput hint="Drop a single file or click Browse" />

Multi-file with limit + helper

Attachments

Max 5 files (max 50MB total)

Drag and drop or browse to upload

Show source

<Field label="Attachments" description="Max 5 files (max 50MB total)">
  <UploadInput multiple maxFiles={5} />
</Field>

Per-file upload progress

Pass `getStatus` returning a number 0-100 to render a progress bar under each file row. The demo below ticks once a second.

Drop files to start the simulated upload

Show source

<UploadInput
  multiple
  getStatus={(_file, index) => Math.min(100, tick + index * 10)}
/>

Per-file error

Return "error" from `getStatus` and supply an error message via `getErrorMessage` to mark a file as failed.

The first dropped file is flagged as failed

Show source

<UploadInput
  multiple
  getStatus={(_, i) => (i === 0 ? "error" : undefined)}
  getErrorMessage={() => "Unsupported file type"}
/>

Disabled

Uploads are temporarily disabled

Show source

<UploadInput disabled hint="Uploads are temporarily disabled" />