Edit this page
[?] Component size, gzipped: 49kb

File Uploader

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.

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

Overrides

Additionally, you can fully customize any part of the File Uploader through the overrides prop. The File Uploader consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

Drop files here to upload
or


Something went wrong. Sorry!

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

API

File Uploader API

accept union

react-dropzone: https://github.com/react-dropzone/react-dropzone/blob/master/typings/react-dropzone.d.ts

One of
string,
Array
string

disableClick boolean = true

Disallow clicking on the dropzone container to open file dialog

disabled boolean

getDataTransferItems function

One of
SyntheticDragEventHTMLElement,
SyntheticInputEventHTMLInputElement,
SyntheticDragEvent*,
SyntheticEvent*
 => PromiseArrayOne of
File,
DataTransferItem

maxSize number

minSize number

multiple boolean

name string

onClick function

SyntheticMouseEventHTMLElement => mixed

onFocus function

SyntheticFocusEventHTMLElement => mixed

onBlur function

SyntheticFocusEventHTMLElement => mixed

onKeyDown function

SyntheticKeyboardEventHTMLElement => mixed

onDragStart function

SyntheticDragEventHTMLElement => mixed

onDragEnter function

SyntheticDragEventHTMLElement => mixed

onDragOver function

SyntheticDragEventHTMLElement => mixed

onDragLeave function

SyntheticDragEventHTMLElement => mixed

onDrop function

function
Array
,
Array
,
SyntheticDragEventHTMLElement
=> mixed

onDropAccepted function

function
Array
,
SyntheticDragEventHTMLElement
=> mixed

onDropRejected function

function
Array
,
SyntheticDragEventHTMLElement
=> mixed

onFileDialogCancel function

() => mixed

preventDropOnDocument boolean

errorMessage string

baseui

onCancel function

() => mixed

onRetry function

() => mixed

overrides { Root: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, FileDragAndDrop: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, ContentMessage: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, ContentSeparator: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, HiddenInput: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, ProgressMessage: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, ErrorMessage: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, ButtonComponent: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>> }<object> = {}

{ Root: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, FileDragAndDrop: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, ContentMessage: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, ContentSeparator: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, HiddenInput: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, ProgressMessage: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, ErrorMessage: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, ButtonComponent: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>> }
$afterFileDrop boolean required
$isDisabled boolean required
$isDragActive boolean required
$isDragAccept boolean required
$isDragReject boolean required
$isFocused boolean required

progressAmount number

progressMessage string

File uploader exports

You can import this module like so:

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

It exports the following components or utility functions:

  • FileUploader
  • StyledRoot
  • StyledFileDragAndDrop
  • StyledContentMessage
  • StyledErrorMessage
  • StyledHiddenInput