RAPIDA UI

Photo Upload

Evidence capture component for damage assessment photos. Supports camera capture, gallery selection, and drag-and-drop with file size validation.

Preview — Empty Upload Zone

Damage photo

Your photo will be stored securely and used only for damage assessment by UNDP.

Preview — Error State

Damage photo

Your photo will be stored securely and used only for damage assessment by UNDP.

Variants

Default (10 MB limit)

Infrastructure photo

Your photo will be stored securely and used only for damage assessment by UNDP.

Custom Help Text

Before & after comparison

Upload a photo showing the current state. A reference photo will be loaded from the database.

States

State Description
EmptyDashed border, camera icon, "Take a photo or choose from gallery"
Drag overBorder turns rapida-blue, background rapida-blue-50, text changes to "Drop your photo here"
PreviewPhoto thumbnail with "Change" and "Remove" actions below
ErrorRed border, error icon, error message, "Tap to try again"

Accessibility

  • The upload zone is keyboard-focusable with tabindex="0" and activates on Enter.
  • Dynamic aria-label changes with state: "Upload photo" vs "Photo selected. Click to change."
  • The hidden file input uses aria-hidden="true" — interaction flows through the visible zone.
  • Uses capture="environment" to open the rear camera on mobile devices.

Trauma-Informed Design

  • Privacy notice: "Your photo will be stored securely and used only for damage assessment by UNDP."
  • Large touch target (160px min-height) for field workers wearing gloves or in rain.
  • Photos are optional unless explicitly marked required — never force a user to photograph trauma.
  • Error messages offer immediate recovery: "Tap to try again" instead of dead-end errors.