FileUpload

Install and import

yarn add @welcome-ui/file-upload @xstyled/styled-components prop-types react react-dom styled-components
import { FileUpload } from '@welcome-ui/file-upload'

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.


Files must be <200MB

Show preview if value exists


example.docx
Files must be <200MB
{
"file": "https://doc-exemple/example.docx?v=63731713698"
}

Multiple

Add multiple property.


Files must be <200MB

Disabled


Change Button

You can change the upload button component.


Properties

NameType(s)DefaultRequired
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
maxSize
number
2000000
multiple
bool
name
string
onAddFile
func
onBlur
func
onChange
func
onError
func
onRemoveFile
func
title
string | node
value
string | object
[]

Dependencies

Peer dependencies