FileUpload
import { FileUpload } from '@enmovil/ui-design-system';
Lets the user upload files, either by dragging them onto a drop area or with an upload button (variant). The drop area's text and icon can be customised, and onChange fires each time the upload changes.
Properties
| Property | Type | Required | Default | Allowed values | Description |
|---|---|---|---|---|---|
variant | string | No | 'dragAndDrop' | 'button', 'dragAndDrop' | dragAndDrop shows a drop area with an icon and two lines of text; button shows an upload button. Defaults to dragAndDrop. |
mainText | string | No | 'Click or drag file to this area to upload' | — | First line of text in the drop area. Defaults to "Click or drag file to this area to upload". dragAndDrop only. |
subText | string | No | 'Support for a single or bulk upload.' | — | Hint shown below mainText. Defaults to "Support for a single or bulk upload." dragAndDrop only. |
placeholder | string | No | 'Upload' | — | The placeholder for the upload button |
size | string | No | 'middle' | 'small', 'middle', 'large' | The size of the upload button |
iconName | string | No | 'CloudUploadOutlined' | One of 836 predefined values | Name of the icon in the drop area or the button, as for the Icon component's name. Defaults to CloudUploadOutlined. |
multiple | boolean | No | false | — | Lets the user pick several files at once. Defaults to false. |
Other attributes
FileUpload passes 34 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.
Events
| Name | Signature | When it fires |
|---|---|---|
onChange | ((info: any) => void) | Fires when a file is added, its upload progresses or finishes, or it is removed. |
beforeUpload | ((file: RcFile, fileList: RcFile[]) => BeforeUploadValueType | Promise<BeforeUploadValueType>) | Called with each file and the list of files being added, before the file is uploaded. Return false to add the file to the list without uploading it. |
onDrop | ((event: DragEvent<HTMLDivElement>) => void) | Fires when files are dropped on the area. dragAndDrop variant only. |
onRemove | ((file: UploadFile<any>) => boolean | void | Promise<boolean | void>) | Fires when a file is removed from the list. Return false to keep it. |
customRequest | ((options: UploadRequestOption<any>, info: { defaultRequest: (option: UploadRequestOption<any>) => void; }) => void) | Custom request options. Mandatory prop if action is not set |
Children
FileUpload does not accept children.
Variants
Loading examples…
Playground
Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default example.
Loading playground…
Storybook
Open FileUpload in Storybook to try every story with the full set of controls.