Avatar Uploader
A round avatar uploader with drop or click, a circular crop dialog, an upload progress ring, replace and remove, and an initials fallback.
Preview
Profile photos
Click or drop an image on a circle.
Ines Varga
PNG, JPG or WebP, square works best.
Theo Park
Uploading… 62%
Malik Osei
PNG, JPG or WebP, square works best.
That file is 14 MB. Choose one under 5 MB.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | — | Person's name, for the initials fallback and labels. |
| value / defaultValue | string | null | null | Current avatar URL. |
| onValueChange | (url: string | null) => void | — | New URL after upload, or null on remove. |
| upload | (blob, onProgress) => Promise<string> | simulateUpload | Uploads the cropped PNG, reports progress 0–1 and resolves with the final URL. |
| maxSize | number | 5 MB | Largest accepted file in bytes. |
| outputSize | number | 512 | Pixel size of the square crop. |
| size | "md" | "lg" | "lg" | 80 or 112 px avatar. |
| heldUpload | number | — | Show an upload in progress at this share (0–1), held still, with the current image as the preview. For docs. |
| defaultError | string | — | Show this error on first render. For docs. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.