Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Blogs
All blogsUploadAvatar
Designer doc
This component is deprecated. Please use the Upload component instead.
Upload avatar image.
Example
Basic Usage
View code
Previewed images
The image displayed will be the selected file, src, and placeholder in order. Try selecting a file from example below.
View code
Customizing Hint
Hint is the overlay text covering lower part of the avatar. You can specify null to hide it.
View code
You can also provide custom content by render anything inside.
View code
Handling upload
In your actual form, you most likely want to control file prop and later make some API request. Below is an example you can do so.
View code
Clearing selected file
To clear selected file, you can render UploadAvatarClear component inside.
View code
If you have src and you want it to be cleared as well, you have to treat it as a state - listen to onSrcChange and set the src.
View code
By default the UploadAvatarClear is hidden if file and src are empty. You can specify hidden prop false to always show the clear button.
View code
Accessibility
There’s no specific accessibility role for upload, thus the most appropriate role will be button. This component is labelled by wrapping Field and hint inside. It also indicates whether a file has been selected.
References
- React Dropzone: https://react-dropzone.js.org/
- Ant Design: https://ant.design/components/upload/
API
UploadAvatar
| Prop name | Type | Default | Description |
|---|---|---|---|
| accept | string | string[] | image/* | |
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| avatarProps | Partial<AvatarProps> & { ref?: Ref<HTMLImageElement>; } | ||
| disabled | boolean | ||
| file | File | ||
| hint | ReactNode | Upload | |
| initialFile | File | ||
| initialSrc | string | ||
| maxSize | number | 2 * MB | |
| minSize | number | ||
| onChange | (file: File) => void | ||
| onDrop | <T extends File>(acceptedFiles: T[], rejectedFiles: T[], event: DropEvent) => void | ||
| onSrcChange | (src: string) => void | ||
| placeholder | string | ||
| size | number | 72 | |
| src | string |
UploadAvatarClear
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> |