FileUpload
Install and import
FileUpload uses render props so you can pass a button through. You have access to openFile to open the native file chooser dialog box.
See your browser console for the real File object ready to upload.
Default
See more about media type.
Show preview if value exists
Multiple
Add multiple property.
Disabled
Customize
Change Button
You can change the upload button component.
Change Preview
You can change the preview component.
You can also set the preview prop to null and handle your own preview in place of the upload button with files & onRemoveFile render props:
Properties
FileUpload
| Name | Type(s) | Default | Required |
|---|---|---|---|
| accept | string Pass a comma-separated string of file types e.g. "image/png" or "image/png,image/jpeg" | */* | |
| children | func | ||
| disabled | bool | ||
| draggable | bool | ||
| handleAddFile | func | ||
| handleRemoveFile | func | ||
| maxSize | number | 2000000 | |
| multiple | bool | ||
| name | string | ||
| onBlur | func | ||
| onChange | func | ||
| onError | func | ||
| preview | node | DefaultPreview | |
| title | string | node | ||
| value | string | object | [] |
Dependencies
- - @welcome-ui/box^3.0.0-alpha.2
- - @welcome-ui/button^3.0.0-alpha.2
- - @welcome-ui/files^3.0.0-alpha.2
- - @welcome-ui/system^3.0.0-alpha.2
- - @welcome-ui/tag^3.0.0-alpha.2
- - @welcome-ui/utils^3.0.0-alpha.2
Peer dependencies
- - @xstyled/styled-components^2.1.0
- - prop-types^15.7.2
- - react^16.10.2 || ^17.0.1
- - react-dom^16.10.2 || ^17.0.1
- - styled-components^5.0.0