ImageUploader

Interactive demo — upload lifecycle

The controlled demo below shows the full lifecycle: empty dropzone → picked files (chips) → "Save upload" (simulated persist — the image becomes the control) → remove (back to empty). This mirrors the real S3ImageUploader wrapper flow: presign → PUT → update currentSrc.

Usage

The minimum is a label and onChange. For persisted images (already saved on the record), pass currentSrc — the image becomes the control (click to replace). For avatar/profile images, use variant="avatar" with initials for the empty slot.

import { ImageUploader } from '@epasslive/design-system'

// Minimum — empty dropzone
<ImageUploader label="Event banner" onChange={setFiles} />

// Persisted image — click to replace
<ImageUploader
  label="Banner"
  aspect="wide"
  currentSrc={event.bannerUrl}
  onRemove={() => setEvent({ ...event, bannerUrl: null })}
  onChange={setFiles}
/>

// Avatar variant — 96px circle with initials fallback
<ImageUploader
  label="Organizer photo"
  variant="avatar"
  initials="GB"
  currentSrc={user.avatarUrl}
  onChange={setFiles}
/>

// Multiple files — chip list with remove
<ImageUploader
  label="Gallery"
  multiple
  hint="Pick up to 10 images"
  onChange={setFiles}
/>

Aspect guidance

• square: 400×400 — profile images, card thumbnails.
• wide: 1600×643 — banners (the real product ratio, ~2.49:1).
• auto: h-24 w-full — full-width strip (default).

Previews are sized by height (h-44 = 176px), so a square and a wide on the same row line up exactly. A width-driven square at full form width would render as tall as the form is wide — height-driven sizing avoids that.

Accessibility

• Visible <button type="button"> trigger opens the native file dialog — Enter/Space work natively. Hidden input is sr-only + tabIndex={-1} + aria-hidden (correct "redirect input" pattern, no double tab stop).
• Accessible name via aria-labelledby pointing at the visible label span.
• Hint wired via aria-describedby to the Caption id.
• Error rendered with role="alert" — announced on insertion.
• Remove controls: removeLabel prop with Remove {label} fallback; chip remove aria-label={Remove {file.name}}; tap target min-h/min-w-[var(--ep-tap-min)].
• Focus styling: focus-visible:ring-2 ring-ep-teal on trigger, focus-within:ring on preview container.

i18n contract

The molecule hardcodes English copy for trigger text ("Click to upload image", "Click to replace", "Click to upload photo", "Click to add images") and remove labels (Remove {label}, Remove {file.name}). The i18n catalog defines imageUploader.{addMultiple, addSingle, remove} keys but they are not wired. No override props exist for trigger copy — the S3ImageUploader wrapper cannot translate strings it doesn't control. Queued for step 6: either wire the keys or add string override props.

Drag-drop posture

ImageUploader is click-only — no drag-drop. Native HTML5 drag-drop lives in the FileUpload organism (and TicketDragDrop). The §122 barrel comment correctly scopes drag-drop coverage to FileUpload, so ImageUploader lacking it is consistent with the dedup. For desktop banner uploads that need drag-drop, use FileUpload.

Object-URL hygiene + duplicate-filename edge

Previews are created via URL.createObjectURL and revoked in the same effect — no leaks. The previews map is keyed by file.name, so two files named a.jpg overwrite each other. Chips are keyed {{file.name}-{i}} which partially masks it. Edge case; fix = key by {name}-{size}-{lastModified}.

Props