Build Assets
UI Component

Photo Upload

Image-only picker with a live thumbnail preview in a square, circular avatar, or wide cover frame.

Platform: bothTags: image-upload, avatar, photo, drag-drop, preview

Purpose

Upload a single image with an immediate preview. Use the avatar frame for profile photos, square for thumbnails, and cover for banners. The preview confirms the crop/framing before the user commits, and an optional crop step lets them adjust framing to a fixed aspect (with a circular preview for avatars).

Anatomy

  • Preview frame (square / circular avatar / wide cover) showing the image or a placeholder icon
  • Hover overlay with a camera icon to replace
  • Upload / Replace + Remove controls
  • Constraints line: image formats + max size
  • Optional crop modal: reposition + resize, aspect-locked, keyboard + touch operable

States

  • Empty: placeholder icon inside a dashed frame
  • Drag over: accent border + light accent background
  • Preview: image fills the frame (solid border)
  • Uploading: spinner overlay; Error: red frame + message

Do

  • Show the image immediately after selection so users can confirm framing
  • Match the frame shape to usage (circle for avatars, wide for covers)
  • Accept common web formats (PNG, JPG, WEBP) and state the max size
  • Offer both Replace and Remove once an image is chosen

Don't

  • Accept non-images — validate type and reject with a clear message
  • Distort the preview; use object-fit: cover to fill the frame
  • Hide the currently-saved image while a new one uploads
  • Rely on color alone to indicate an upload error

Accessibility

  • A real <input type="file" accept="image/*"> exists (hidden, focusable)
  • Preview frame: role="button", tabindex="0", keyboard-activated
  • Uploading state announced via aria-live; preview <img> has empty alt (decorative)