Skip to main content

File Uploader

v.4.0.0

Installation​

yarn add @mercell/file-uploader-react

Usage​

Using the File Uploader component is as simple as importing it like this.

import { FileUploader, useFileUploader } from '@mercell/file-uploader-react';
import { FileList } from '@mercell/file-list-react';
import { Download32, TrashCan32 } from '@carbon/icons-react';
Live Editor
Result

Types, definitions, etc.​

FileUploaderProps
interface FileUploaderProps<T = void>
    extends Omit<JSX.IntrinsicElements['input'], 'onChange'> {
    files?: File[];
    onChange?: (files: File[]) => void | Promise<T>;
    alerts?: AlertConfig[];
    dragAndDropText?: string;
    browseButtonText?: string;
    sizeLimitText?: string;
} & MutableRefObject<HTMLInput>
NameTypeDefaultRequiredDescription
filesarray-noArray of all files
onChangefunction-noFunction for onChange
alertsAlertConfig[]-noAlert config array to create alerts
dragAndDropTextstring-noText to inform about drag and drop files
browseButtonTextstring-noText for browse button
sizeLimitTextstring-noText the size limit label
AlertProps
type AlertConfig = AlertProps & {
    description: string;
    actions: Action[];
};

Regarding the AlertProps props please go to the Alert documentation.

Regarding the Action props please go to the FileList documentation.