Upload

Upload component is used for file upload. 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.

Example

There are 4 variants for upload component which are basic, avatar, thumbnail and button.

Basic Usage

The default variant for upload is basic.

Below example is avatar variant.

Below example is thumbnail variant.

Below example is button variant. The button text can be customised using inputProp.

Upload Multiple Files

You can specify set multiple prop to true. Note that this is applicable to all variants except for avatar. By default, the display type is gallery, where a grid of file previews will be displayed. This will be elaborated on more in below section Upload Preview.

Below example is for basic variant. Note that this is similar to button variant.

Below example is for thumbnail variant.

By default, selecting files for the second time will add on to the currently selected files. You can make it replacing instead of adding by specifying the onDrop.

Upload Preview

Gallery view

The default view is gallery type. If it is an image, image preview will be shown. Otherwise, its corresponding file type icon will be shown. Hover over the image and click bin icon to remove.

Below examples are shown with basic variant. You can refer to these examples for button variant as well by changing variant to button.

For upload multiple previews, gallery type default shows a grid of previews with 3 columns as below.

The number of columns in the grid is defaulted to 3, and can be changed by columns property for UploadGroup, for example to 5 columns.

List view

The view type can be set with list. Note that list type is applicable for basic and button variants only.

For upload multiple previews, list type can be set as well.

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. Alert toast can be shown if user uploads a file larger than the maximum size.

The default accept type for avatar is image/*, while for the other variants, the default accept type is all file types.

Note that accept and maxSize props are also used for default description in the placeholder for basic variant only. For example, setting them to image/* and 20 MB will display “Only support images, max 20 MB”.

Placeholder

The placeholder can be customised for each type of variant.

For basic variant, the placeholder text and description can be specified using placeholder prop.

For avatar variant, the placeholder text and image can be specified using placeholder prop. The image displayed will be the selected file and image in order.

For thumbnail variant, the placeholder text can be specified using placeholder prop.

Customise Upload Container Size

Size can be changed from default using containerSize prop for the different variants, except button upload.

For basic variant,the height will be auto adjusted in order to fit all the contents of the placeholder. For avatar and thumbnail variants, the height will be same as the width. Refer to below example on customising the width.

For button variant single upload, containerSize is not applicable on Upload. Instead, the preview width and height can be set by directly passing containerHeight and containerWidth on UploadItem.

Customise Upload Items Preview

For gallery view, preview icon can be added to show image preview by passing in onPreview property in getItemProps. Refer to Lightbox component for more details on image preview.

For list view, click on file name to preview image.

For upload multiple, similarly the onPreview can be set.

Customise Upload States

There are different upload states, which are pending and error states. Similarly, this can be customised by using getItemProps.

To show pending state, either pass in a value (>= 0) to progress property in getItemProps or pass null to show indeterminate state. This will show the progress bar for list type or progress circle for gallery type.

To show error state, set invalid and message to display the error message. The below examples will show how upload states can be customised for each variant.

Basic

The below example is for basic variant with gallery view. Button variant will follow similar.

Below is list view.

For upload multiple, similarly the progress, invalid and message can be set to display the pending and error states.

Avatar

Thumbnail

For upload multiple, similarly the progress, invalid and message can be set to display the pending and error states.

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 …”.

For gallery preview type, you can use Backspace to delete the focused item.

References

• React Dropzone: https://react-dropzone.js.org/
• Ant Design: https://ant.design/components/upload/

API

Upload

UploadClear

UploadGroup

UploadInput

UploadItem

UploadItemAvatar

UploadItemGallery

UploadItemList

UploadPlaceholder

UploadPlaceholderAvatar