FileUpload

Install and import #

yarn add @welcome-ui/file-upload @xstyled/styled-components prop-types react react-dom styled-components

yarn add @welcome-ui/file-upload @xstyled/styled-components prop-types react react-dom styled-components

import { FileUpload } from '@welcome-ui/file-upload'

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.

Avatar
Files must be <200MB

Show preview if value exists #

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

Multiple #

Add multiple property.

Files
Files must be <200MB

Disabled #

Customize #

Change Button #

You can change the upload button component.

Change Preview #

You can change the preview component.

File
example.docx
{
  "file": "https://doc-example/example.docx?v=63731713698"
}{
  "file": "https://doc-example/example.docx?v=63731713698"
}

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:

File

Properties #

FileUpload #

Name	Type(s)	Default
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 #

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

Made with by