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