File Upload

Drag-and-drop or click-to-browse uploads with image previews, per-file progress, MIME and size validation, error states, and retry. Used for ID front/back, receipts, and academic transcripts in TpEMIS KYC. Defaults to PNG/JPEG and the 5MB cap from the data model.

Single image — ID front

Single-file mode replaces the previous selection. Demo uploader fails at random to surface the retry button.

Click to upload or drag and drop

PNG, JPEG up to 5.0 MB

PNG or JPEG, 5MB max

Multiple — supporting docs

Set multiple to allow appending. Each file gets its own progress bar and remove button.

Click to upload or drag and drop

APPLICATION/PDF, PNG, JPEG up to 5.0 MB

PDF, PNG, JPEG up to 5MB each

Field-level error

Pass error to render a destructive border + message below the dropzone — independent of per-file validation errors.

Click to upload or drag and drop

PNG, JPEG up to 5.0 MB

Disabled

Locked field — cursor changes, drop events ignored, dropzone loses tab stop.

Click to upload or drag and drop

PNG, JPEG up to 5.0 MB

Only available to applicants outside Sierra Leone.

Validation

  • Per-file MIME check against the accept prop (supports type/* wildcards and extension fallbacks).
  • Per-file size check against maxSizeBytes (default 5MB).
  • Failed uploads keep the entry visible with an inline error and retry button — no silent drops.
  • Object URLs for image previews are revoked on remove and on unmount.

Accessibility

  • Dropzone is a role="button" with tabindex; Enter and Space activate the file picker.
  • Hidden native <input type="file"> stays in the DOM so password managers and assistive tech see a real form control.
  • Per-file errors render inside role="alert" for instant screen-reader announcement.
  • Remove and retry buttons carry aria-labels naming the target file.
  • Pass name to participate in HTML form submission.