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!

function Example() {
  const [files, setFiles] = useState<File[]>([]);

  const validateFileSize = (file: File) => {
    const MB = 1024 * 1024;

    return file.size <= MB;
  };

  return (
    <Form>
      <FormGroup>
        <FileUploader
          dropzoneConfig={{
            label: 'Drag and drop image here',
            action: {
              label: 'Upload by URL',
              onClick: () => null,
            },
          }}
          files={files}
          label="Upload files"
          multiple
          onFilesChange={setFiles}
          required
          validators={[
            {
              validator: validateFileSize,
              type: 'file-size',
            },
          ]}
        />
      </FormGroup>
    </Form>
  );
}

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; optional: 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.