Avatar Upload — Profile Picture Preview Snippet

An avatar upload — a circular control for choosing a profile picture with an instant preview — is one of the most-searched form snippets because nearly every app with user accounts (and every profile card) needs one, and doing it well (preview, remove, no broken images, no memory leaks) takes more than a bare file input. This snippet is a complete, accessible avatar uploader: a circular dropzone with a placeholder icon, an instant local preview of the chosen image, a camera edit badge, and a remove button — all built on a real <input type="file"> so it submits and is keyboard-operable.

Instant preview with createObjectURL

The moment a user picks an image, it appears in the circle — no upload, no server round-trip. The change handler calls URL.createObjectURL(file), which creates a temporary local URL pointing at the chosen file in memory, and sets it as the <img> source. This is the standard, efficient way to preview a selected file: it is instant and does not read the whole file into a base64 string the way FileReader does. The image is shown with object-fit: cover so any aspect ratio fills the circle without distortion — a portrait or landscape photo is cropped to a clean square avatar automatically (for manual framing, add the image cropper).

Avoiding the memory leak (revokeObjectURL)

Object URLs hold the file in memory until you release them, so a naive implementation that calls createObjectURL on every change slowly leaks memory. This snippet tracks the current URL in a currentUrl variable and calls URL.revokeObjectURL(currentUrl) before creating a new one (when the user picks a different photo) and when removing the photo. This cleanup is the detail most avatar-upload tutorials miss, and it is what makes the component safe to use repeatedly. It is the object-URL equivalent of clearing up after yourself.

The placeholder, preview, and edit states

The control has three visual states driven by a .has-img class. Empty: a dashed indigo ring with a person-silhouette placeholder icon, signaling "click to add a photo." Hover: the ring darkens and a camera badge pops in at the bottom-right. Filled: once an image is set, the ring becomes a solid border, the placeholder hides behind the photo, and the camera badge stays visible so users know they can change it. The camera badge animates in with a scale-and-fade, and its border matches the page background so it looks cleanly attached to the avatar edge. These states make the affordance obvious at every step.

The remove control

Letting users undo a choice is essential. A "Remove photo" button (hidden until a photo is set) clears everything: it revokes the object URL, resets the file input (input.value = ''), hides and unsets the <img>, drops the .has-img class back to the empty placeholder state, and hides itself. Resetting input.value is the correct way to clear a file input (you cannot set its value for security reasons, but you can clear it), which also means picking the *same* file again afterward still fires a change event.

Built on a real, accessible file input

The whole control is a <label> wrapping a hidden-but-present <input type="file" accept="image/*">. The input is hidden with opacity: 0 and 1px size (not display: none, which would remove it from the tab order), so it stays focusable and keyboard-operable, and .au-ring:focus-within shows a focus ring when it is focused. Because it is a genuine file input, the avatar is included in a normal form submit under its name, the OS file picker works, and screen readers announce it as a file upload. The accept="image/*" attribute filters the picker to images, and the handler double-checks file.type.startsWith('image/') before previewing.

Customizing the uploader

Re-theme by changing the empty ring's dashed color, the hover state, the camera badge color, and the focus ring. Resize by changing the ring's width/height (keep it a circle) and scaling the badge. To enforce a max file size, check file.size in the handler and show an error if it is too large. To crop to a square before upload, pair this with a cropping step, or rely on object-fit: cover plus a server-side crop. To actually upload, send the file (from input.files[0]) via fetch with FormData when the form submits — the preview and the upload are independent, so the UI stays responsive. The structure — label, hidden input, img, placeholder, badge, remove — stays the same.

Accessibility and behaviour notes

Keep the native input so the control is keyboard-focusable and submits with the form; :focus-within makes keyboard focus visible. Give the <label> a title or visually-hidden text like "Upload a profile photo" so its purpose is announced (the placeholder icon alone is not descriptive). When a photo is loaded, set a meaningful alt on the <img> (e.g. "Your profile photo") rather than leaving it empty, so screen-reader users know an image is present. Because the preview is purely local until submit, nothing is uploaded or stored without the user completing the form — a privacy-friendly default.