FileUploader

Overview

FileUploader allows users to upload content of their own to the system. A file uploader is commonly found in forms, but can also live as a standalone element.

When to use:

  • Uploading one or multiple documents or images.
  • Drag and drop one or multiple documents or images.

Implementation

Edit the code below to see your changes live!

Props

Supports most native <input /> element attributes.

Prop name
Type
Default
Description
actionsFileAction[]

Value for the FileUploader. Only accepts File[].

acceptstring

Takes as its value a comma-separated list of one or more file types or unique file type specifiers, such as video/*,image/*

descriptionstring | FormControlDescription

Adds a description to the FileUploader.'

disabledboolean

Disables the FileUploader.

dropzoneConfigDropzoneConfig[]

Adds a label and a description to the drop-zone box.

errorstring | string[] | FormControlError | FormControlError[]

Displays an error message for the field. Error message will be passed to the FormGroup for display purposes.

files *File[]

Value for the FileUploader. Only accepts File[].

previewHiddenboolean

Value for the FileUploader. Only accepts File[].

labelstring | FormControlLabel

Label element for FileUploader. Component will auto generate id's for the accessibility API.

labelIdstring

Adds an id to the generated label element.

localization{ upload: string }

Overrides labels with localized text.

multipleboolean

Allows to upload multiple files.

validatorsValidatorConfig[]

Allows to define custom validators for files.

onFilesChange *(files: File[]): void

Function called to change files value. Receives new files from the component.

onFilesError(errors: FileValidationError[]): void;

Function called when one of the validators fails. Receives an array of errors.

Props ending with * are required

Do's and Don'ts

Do
Specify allowed file types and maximum size.