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

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