@n3/react-fileuploader

@n3/react-fileuploader

Установка

npm install @n3/react-fileuploader

API

Использование

import FileUploader from '@n3/react-fileuploader';

...

<FileUploader
  files={files}
  isShow={isShow}
  disabled={disabled}
  multiple={multiple}
  maxLength={maxLength}
  help={help}
  renderFile={renderFile}
  uploadFile={uploadFile}
  onChange={onChangeFiles}
  showDownloadControl={showDownloadControl}
  showRemoveControl={showRemoveControl}
  getControls={getControls}
  isDragAndDrop={isDragAndDrop}
/>

Props

• files - обязательное, массив файлов вида:

  • id: String | Number - обязательное, id файла
  • name: String - обязательное, название файла
  • url: String - ссылка на скачивание файла
  • size: Number - размер файла в байтах
  • extension: String - расширение файла
  • uploadErrors: any - ошибки при загрузке файла

• isShow: Boolean - включен ли режим просмотра (отображается только список файлов, по умолчанию нет кнопки удаления), по умолчанию false

• disabled: Boolean - выключено ли поле ввода, по умолчанию false

• multiple: Boolean - возможен ли выбор нескольких файлов в инпуте, по умолчанию true

• maxLength: Number - ограничивает максимальное количество файлов для загрузки, по умолчанию null - не ограничено

• help: React Node - контент блока справа от кнопки, по умолчанию null

• inputProps: Object - объект дополнительных свойств для input[type="file"] элемента

• renderFile: (fileId, props, FileBlockComponent, index) => Element - функция для переопределения рендера загруженных или загружающихся файлов. FileBlockComponent - оригинальный компонент для рендера лейбла файла, props - оригинальные props, которые принимает FileBlockComponent, fileId - id файла, index - индекс файла в списке. Если props.mode = "submitting", то это список загружающихся файлов, если "ready", то загруженных, если "error", то не загруженных из-за ошибки во время загрузки

• uploadFile: async (File) => {id, name, url, size, extension} - асихнхронная функция аплоада файла на сервер, должна возвращать новый файл для списка

• onChange: (file[]) => void - колбэк, который вызывается при изменении списка файлов

• showDownloadControl: Boolean - показывать ли кнопку скачивания файла, по умолчанию true

• showRemoveControl: Boolean - показывать ли кнопку удаления файла, по умолчанию true

• getControls: ({ file, disabled, showDownloadControl, showRemoveControl, removeFile }) => [{ render, renderIcon, text, ...rest }] - функция, создающая конфигурацию кнопок для управления файлом, перекрывает свойства showRemoveControl и showDownloadControl

  • render - функция рендера кнопки, принимает первым аргументом объект вида

  {
    control,  // текущий элемент массива
    className, // css-класс кнопки
    children, // содержимое кнопки
  }
  

  • renderIcon - необязательное, функция рендера иконки, не принимает аргументов

  • test - тектс кнопки

• isDragAndDrop: Boolean - показывать ли поле для драг-н-дропа, по умолчанию true

PropTypes

import { fileIdPropType, filePropType } from '@n3/react-fileuploader';

• fileIdPropType - тип id файла
• filePropType - тип файла из массива files

UploadFileError

Ошибка, которая должна быть вызвана в случае неудачной загрузки файла в функции uploadFile

import { UploadFileError } from '@n3/react-fileuploader';

const uploadFile = async () {
  ...

  throw new UploadFileError([
    'error1',
    'error2',
    'error3',
  ]);
}

Стили

Подключение стандартных стилей:

import '@n3/react-fileuploader/dist/n3-react-fileuploader.css';