<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" | |
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.