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.

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!

File Uploader API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>