Avatar Upload

Pick or drop a photo, crop it to a circle, and show it in an Avatar. Hands back a data URL and a Blob.

Profile photo

Shown on invoices and in the client portal.

JPG, PNG or WebP, up to 10 MB. You can crop it next.

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/avatar-upload.json

Usage

import { AvatarUpload } from "@/components/ui/avatar-upload"

<AvatarUpload
  defaultValue="/avatars/02.png"
  fallback="JV"
  onUpload={async ({ blob }) => {
    await fetch("/api/avatar", { method: "PUT", body: blob })
  }}
/>

Cropping

Picking or dropping an image opens the cropper. It is a Dialog on larger screens and a Drawer on phones.

Drag the photo to move it. Arrow keys nudge it, and Shift makes the steps bigger.
Zoom with the Slider, the buttons beside it, the mouse wheel, a pinch, or the plus and minus keys.
The photo always covers the circle, so there are never empty edges.

Saving draws the square behind the circle to a canvas. The Avatar rounds it, so the saved image stays square and works anywhere.

Props

value, defaultValue, onChange. The image as a URL or data URL. onChange gets the new data URL, or null after Remove, plus the Blob and the source file.
onUpload. Runs with the cropped Blob before the photo is set. If it throws, the message shows under the buttons and the old photo stays.
outputSize, outputType, outputQuality. The saved image size in pixels (512 by default), PNG, JPEG or WebP, and the quality for the last two.
accept, maxSize. Which files can be picked, and the largest source file in bytes (10 MB by default).
fallback, label, description, disabled. What shows with no photo, the button text, and the hint under it.

Remove uses the destructive button. The cropper plays the open sound, saving plays success, and a bad file plays error.

Avatar Badge

On This Page

Installation Usage Cropping Props