WUI logo

FileUpload

Allows user to upload a file easily.

version

4.2.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.

Default #

See more about media type.

function () {
const [value, setValue] = React.useState(null)
const handleChange = file => {
setValue(file)
}
return (
<Field label="Avatar" hint="Files must be <200MB" required>
<FileUpload
accept="image/*"
handleAddFile={handleChange}
handleRemoveFile={handleChange}
name="avatar"
onError={console.error}
value={value}
>
{({ openFile }) => <Button onClick={openFile}>Upload avatar</Button>}
</FileUpload>
</Field>
)
}

Show preview if value exists #

function () {
const [value, setValue] = React.useState('https://doc-example/example.docx?v=63731713698')
const handleChange = file => {
setValue(file)
}
return (
<Field label="File" hint="Files must be <200MB" required>
<FileUpload
accept="image/*"
handleAddFile={handleChange}
handleRemoveFile={handleChange}
name="file"
value={value}
/>
</Field>
)
}

Multiple #

Add multiple property.

function () {
const [value, setValue] = React.useState(null)
const handleChange = file => {
setValue(file)
}
return (
<Field label="Files" hint="Files must be <200MB" required>
<FileUpload
accept="application/pdf"
name="files"
multiple
handleAddFile={handleChange}
handleRemoveFile={handleChange}
>
{({ openFile, disabled }) => (
<Button onClick={openFile} variant="secondary" disabled={disabled}>
Choose file(s)
</Button>
)}
</FileUpload>
</Field>
)
}

Disabled #

<Field disabled>
<FileUpload name="disabled">
{({ openFile, disabled }) => (
<Button onClick={openFile} disabled={disabled}>
Choose file
</Button>
)}
</FileUpload>
</Field>

Customize #

Change Button #

You can change the upload button component.

function () {
const [value, setValue] = React.useState(null)
const handleChange = file => {
setValue(file)
}
return (
<Field>
<FileUpload name="custom" handleAddFile={handleChange} handleRemoveFile={handleChange} value={value}>
{({ openFile, disabled }) => (
<Button size="xl" shape="circle" onClick={openFile} disabled={disabled}>
<UploadIcon size="xl" />
</Button>
)}
</FileUpload>
</Field>
)
}
Change Preview #

You can change the preview component.

function() {
const [value, setValue] = React.useState('https://doc-example/example.docx?v=63731713698')
const handleChange = file => {
setValue(file)
}
const Preview = ({ file, onRemove }) => {
const Icon = getFileIcon(file)
const name = getFileName(file)
const size = getFileSize(file)
return (
<Tag
backgroundColor="light.900"
data-id={name}
key={name}
mt="sm"
px="xl"
h={60}
size="lg"
alignItems='center'
>
<Icon size="lg" mr="sm" />
{name}
{size && <Box color="nude.600">({size})</Box>}
<Button onClick={onRemove} variant="quaternary" shape="square" ml="xxl" size="sm">
<CrossIcon size="sm" />
</Button>
</Tag>
)
}
return (
<Field label="File">
<FileUpload name="file" preview={Preview} handleAddFile={handleChange} handleRemoveFile={handleChange} value={value}>
{({ openFile, disabled }) => (
<Button onClick={openFile} disabled={disabled}>
Custom preview
</Button>
)}
</FileUpload>
</Field>
)
}

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:

function () {
const [value, setValue] = React.useState(null)
const handleChange = file => {
setValue(file)
}
return (
<Field label="File">
<FileUpload name="file" multiple preview={null} handleAddFile={handleChange} handleRemoveFile={handleChange} value={value}>
{({ openFile, files, onRemoveFile }) =>
files.length === 0 ? (
<Button onClick={openFile}>Upload files</Button>
) : (
<Stack direction="row">
{files.map(file => (
<Button key={file.preview} onClick={() => onRemoveFile(file)}>
{getFileIcon(file)} Click to remove {file.name}
</Button>
))}
</Stack>
)
}
</FileUpload>
</Field>
)
}

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