<ImageUploadField
value={avatarUrl}
onFileCropped={upload}
onRemove={clear}
shape="circle"
/>shape="rectangle" with an aspectRatio covers a banner. onFileCropped
receives the cropped file, so the upload stays yours.
API
| Prop | Type | Default | |
|---|---|---|---|
onFileCropped | (blob: Blob) => void | required | Fired with the cropped Blob once the user confirms — parent uploads it. |
aspectRatio | number | 1 | Crop aspect ratio: 1 for avatars, 3 for covers. |
cancelLabel | string | "Cancel" | |
confirmLabel | string | "Save" | |
description | ReactNode | "Click to browse or drag and drop" | |
initialFocus | Partial<ImageCropperFocus> | — | Where the crop opens on a picked image, in fractions of its own size; defaults to its centre on both axes, so naming one axis is the common case. A profile photo wants something above centre, since a centred square crop of a portrait reliably takes the chin off. The user can still pan and zoom from there. |
isUploading | boolean | false | While true, the confirm button spins and a Progress bar shows. |
label | ReactNode | "Upload an image" | |
onRemove | (() => void) | — | |
outputSize | { readonly width: number; readonly height: number; } | — | Fixed output dimensions for the cropped image (e.g. a 512×512 avatar). Defaults to the cropped region's natural size. |
removeLabel | ReactNode | "Remove" | |
replaceLabel | ReactNode | "Replace" | |
shape | ImageUploadShape | "circle" | |
value | string | null | — | Current image URL, or null/undefined when nothing is set yet. |
Plus every <div> prop. Source: image-upload-field/components/image-upload-field.tsx.