Component size, gzipped: 30kb

File Uploader

API

Creates a dropzone for file uploads.

Accessibility

  • "Browse files" has aria-controls="fileupload" set.

When to use

  • Enable file(s) upload through drag and drop or the system Browse files dialog.

Security considerations

By default, the file uploader does not concern itself with validating and discarding potentially malicious files, as Base Web never runs any of the uploaded files. It's the responsibility of the consuming application to do so. To help with that, this component supports the accept property, which can limit the acceptable file extensions.

To learn more, read the corresponding OWASP article on file uploads.

Examples

File uploader basic usage

Drop files here to upload
or

File upload with error

Drop files here to upload
or

File upload with unknown progress

Drop files here to upload
or

File uploader in disabled state

Drop files here to upload
or

File uploader with overrides

Drop files here to upload
or

API

File uploader props

accept
string
Set accepted file types. See https://github.com/okonet/attr-accept for more information
disableClick
boolean
Disallow clicking on the dropzone container to open file dialog.
disabled
boolean
Renders component in disabled state.
errorMessage
string
Error message to be displayed.
maxSize
number
Maximum file size (in bytes).
minSize
number
Minimum file size (in bytes).
multiple
boolean
Allow drag n drop (or selection from the file dialog) of multiple files
name
string
Name attribute.
onBlur
function
Called when the onBlur even is triggered.
onCancel
function
Called when the onCancel even is triggered.
onClick
function
Called when the onClick even is triggered.
onDragEnter
function
Called when the onDragEnter even is triggered.
onDragLeave
function
Called when the onDragLeave even is triggered.
onDragOver
function
Called when the onDragOver even is triggered.
onDragStart
function
Called when the onDragStart even is triggered.
onDrop
function
Called when the onDrop even is triggered.
onDropAccepted
function
Called when the onDropAccepted even is triggered.
onDropRejected
function
Called when the onDropRejected even is triggered.
onFileDialogCancel
function
Called when the onFileDialogCancel even is triggered.
onFocus
function
Called when the onFocus even is triggered.
onKeyDown
function
Called when the onKeyDown even is triggered.
onRetry
function
Called when the onRetry even is triggered.
overrides
custom
Lets you customize all aspects of the component.

File uploader exports

You can import this module like so:

import {FileUploader} from 'baseui/file-uploader'

It exports the following components or utility functions: