WUI logo

FileUpload

Allows user to upload a file easily.

version

5.14.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 #
NameType(s)DefaultRequired
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

Packages #

Dependencies #
Peer dependencies #

Previous

FileDrop

Next

Hint