FileUpload
Allows user to upload a file easily.
version
5.1.0
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 |