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
- - @welcome-ui/button^3.0.0
- - @welcome-ui/files^3.4.0
- - @welcome-ui/system^3.0.0
- - @welcome-ui/tag^3.4.0
- - @welcome-ui/utils^3.0.0
Peer dependencies
- - @xstyled/styled-components^2.2.3
- - prop-types^15.7.2
- - react^16.10.2 || ^17.0.1
- - react-dom^16.10.2 || ^17.0.1
- - styled-components^5.2.1