ImageUpload

A single-image upload component with drag-and-drop support, inline preview, loading state, and file validation. Available in square and circle variants, making it suitable for both general image fields and profile avatar uploads.

Import

import { ImageUpload } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<ImageUpload
  value={imageUrl}
  onChange={(url) => setImageUrl(url)}
  onUpload={async (file) => {
    const url = await uploadToStorage(file);
    return url;
  }}
/>
 
<ImageUpload
  variant="circle"
  size={160}
  emptyIcon="UserCircleIcon"
  onChange={handleChange}
  onUpload={handleUpload}
/>

Props

Prop	Type	Default	Description
`onChange`*	(url: string \| null) => void	-	Callback fired when the image changes. Receives the URL or null when removed.
`onUpload`*	(file: File) => Promise<string>	-	Async function that uploads the file and returns the resulting URL.
`value`	string	-	Current image URL for controlled usage.
`variant`	'square' \| 'circle'	`'square'`	Shape variant of the upload area.
`size`	number	`128`	Width and height of the upload area in pixels.
`maxSize`	number	`5242880`	Maximum file size in bytes (default is 5 MB).
`emptyIcon`	HeroIconName	-	Icon shown when no image is set. Defaults to 'UserCircleIcon' for circle and 'PhotoIcon' for square.
`labels`	ImageUploadLabels	-	Custom label strings for internationalization (uploadText, fileSizeError, fileTypeError, uploadError, removeAriaLabel, uploadAriaLabel).
`disabled`	boolean	`false`	Whether the upload is disabled.
`className`	string	-	Additional CSS classes to apply to the upload area.