FileUpload
Allows user to upload a file easily.
version
5.0.0-alpha.16
install
yarn add @welcome-ui/file-upload
usage
import { FileUpload } from '@welcome-ui/file-upload'
About #
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.
Usage #
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" | */* | |
| maxSize | number | 2000000 | |
| handleAddFile | (files: FileWithPreviewType | FileWithPreviewType[]) => void | ||
| handleRemoveFile | HandleRemoveType | ||
| preview | FC<PreviewProps> | ||
| onBlur | () => void | ||
| onChange | (event: { preventDefault: () => void; target: Record<string, unknown>; }) => void |