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 blogsUploadFile
Designer doc
This component is deprecated. Please use the Upload component instead.
UploadFile component.
Example
If you’re looking for lower-level abstraction, we recommend using react-dropzone - it’s a hook based library that doesn’t restrict what to render. Under the hood, this component wraps that library with some common styles.
Basic Usage
View code
File Types and Size
You can set accepted file types through accept prop. See https://github.com/okonet/attr-accept for more information. By default, maximum size can be uploaded is 2 MB. You can specify maxSize prop (in bytes) to change it.
These props are also used for default description in the placeholder. For example, setting them to image/* and 20 MB will display “Only support images, max 20 MB”.
View code
ImgSrc, Custom Instruction or Translation
By default, this component renders UploadFileChildren - a component that conditionally renders UploadFilePlaceholder, UploadFilePreview, or UploadFileImagePreview based on selected files.
- If you want only to change the texts (e.g. translations), it’s recommended to use UploadFileChildren and specify each forwarded props. This is to avoid repetitions.
- Else, you can also have complete control by rendering anything else (including UploadFilePlaceholder, UploadFilePreview, and UploadFileImagePreview) inside. Please check the next section how to do so.
- If is editing image file, can set the imgSrc to show the previous saved image.
View code
Custom Content
Note that you can specify set multiple prop to true. However, you may need to handle rendering the list of selected files.
By default, selecing files for the second time will replace the currently selected files. You can make it adding instead of replacing by specifying the onChange like example below.
View code
Upload Immediately
View code
Accessibility
There’s no specific accessibility role for upload, thus the most appropriate role will be button.
This element is described by the content rendered - when no file selected it will say “Browse or drag…”, and when selected it will say like “Image selected with filename …”.
References
- React Dropzone: https://react-dropzone.js.org/
- Ant Design: https://ant.design/components/upload/
API
UploadFile
| Prop name | Type | Default | Description |
|---|---|---|---|
| accept | string | string[] | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| disabled | boolean | ||
| files | File[] | ||
| initialFiles | File[] | [] | |
| invalid | boolean | ||
| maxSize | number | 2 * MB | By default is 2048. |
| minSize | number | ||
| onChange | (files: File[]) => void | ||
| onDrop | <T extends File>(acceptedFiles: T[], rejectedFiles: T[], event: DropEvent) => void | When the files selected are rejected (due to maxSize, minSize, accepts, etc), you can get the rejectedFiles from the second parameter. |
UploadFileChildren
| Prop name | Type | Default | Description |
|---|---|---|---|
| imagePreviewProps | UploadFileImagePreviewProps | ||
| placeholderProps | UploadFilePlaceholderProps | ||
| selectedProps | UploadFilePreviewProps |
UploadFileImagePreview
| 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. | |
| hint | ReactNode | ||
| hintProps | HTMLAttributes<HTMLDivElement> & { as?: any; ref?: Ref<HTMLDivElement>; } | ||
| imgSrc | string | ||
| removeProps | IconButtonProps & { ref?: Ref<HTMLDivElement>; } |
UploadFileItem
| 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. | |
| detailProps | DivProps | ||
| file | File | ||
| icon | ReactNode | ||
| iconProps | DivProps | ||
| nameProps | DivProps | ||
| onDelete | (e: SyntheticEvent<HTMLDivElement, Event>) => void | ||
| sizeProps | DivProps |
UploadFilePlaceholder
| 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. | |
| description | ReactNode | ||
| descriptionProps | DivProps | ||
| text | ReactNode | ||
| textProps | DivProps |
UploadFilePreview
| 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. | |
| itemProps | UploadFileItemProps & { ref?: Ref<HTMLDivElement>; } | ||
| removeProps | IconButtonProps & { ref?: Ref<HTMLDivElement>; } |
UploadFileProgress
| 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. | |
| itemProps | UploadFileItemProps & { ref?: Ref<HTMLDivElement>; } | ||
| onDelete | (e: SyntheticEvent<HTMLDivElement, Event>) => void | ||
| progress | number | ||
| progressProps | ProgressBarProps & { ref?: Ref<HTMLDivElement>; } |