PNG, JPG or WebP, up to 5 MB
An avatar uploader: a round or rounded-square avatar with the current photo or the person's initials, and a camera overlay on hover. Click, drop or paste an image and a crop step opens in place: the picture under a circular mask, dragged to frame it, zoomed with the wheel, a slider or a pinch, and moved with the arrow keys, always covering the whole avatar. Save renders the crop to a square canvas and returns a Blob and a data URL; Cancel puts the old avatar back. A ring around the avatar shows upload progress, a remove button clears it, and accepted types and a size limit reject files with an inline message.
The import and the props worth knowing about, in one place.
import { FileAvatar } from "@/components/beste/component/file-avatar";
<FileAvatar
name="Björk"
defaultValue="/avatars/bjork.jpg"
onChange={async (result) => {
if (!result) return console.log("removed");
const body = new FormData();
body.append("avatar", result.blob, "avatar.png");
console.log("upload", result.blob.size, "bytes");
}}
/>
// A rounded square, a smaller JPEG, and progress you drive yourself
<FileAvatar
name="Nina Simone"
shape="rounded" // "circle" (default) | "rounded"
outputSize={512} // px of the saved square
outputType="image/jpeg"
quality={0.85}
maxSize={2 * 1024 * 1024} // 2 MB
progress={0.4} // 0 to 1, null hides the ring
size="lg" // "sm" | "default" | "lg"
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Click, drop or paste | Pick an image and open the crop step |
|---|---|
| Drag / pinch | Move the picture / zoom it inside the crop |
| Arrows (Shift for bigger steps) | Move the picture in the focused crop area |
| + / - | Zoom in or out |
| Enter / Escape | Save the crop / cancel it |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | null | — | Image shown in the avatar, controlled. `null` shows the initials. |
defaultValue | string | null | — | Image shown at first, uncontrolled. |
onChange | (result: FileAvatarResult | null) => void | — | A saved crop, or `null` when the avatar is removed. |
name | string | — | Whose avatar it is: initials when there is no image, and part of every accessible name. |
shape | "circle" | "rounded" | — | Round avatar or a rounded square. |
outputSize | number | — | Width and height of the saved image, in pixels. |
outputType | "image/png" | "image/jpeg" | "image/webp" | — | Format of the saved image. |
quality | number | — | Quality for jpeg and webp, 0 to 1. |
accept | string | — | Accepted files, like the native input's `accept`. |
maxSize | number | — | Largest file in bytes. |
progress | number | null | — | Upload progress, 0 to 1, drawn as a ring around the avatar. `null` hides it. |
removable | boolean | — | Offer a remove button when there is an image. |
hint | string | — | Line under the buttons, e.g. the accepted formats. |
disabled | boolean | — | |
tone | "muted" | "outline" | "ghost" | — | |
size | "sm" | "default" | "lg" | — | |
className | string | — |