@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

Название	Обязательность	Тип	Значение по умолчанию	Описание
buttonProps		{ [key: string]: unknown }	undefined	Дополнительные props кнопки в варианте вывода кнопкой
disabled		bool	false	Выключено ли поле ввода
multiple		bool	true	Возможен ли выбор нескольких файлов в инпуте
maxLength		number	null	Максимальное количество файлов для загрузки (в случае null не ограничено)
help		node	null	Текст подсказки
files	+	arrayOf [   shape {   - id     custom   - name     string   - url     string   - size     number   - extension     string   - isImage     bool   - uploadErrors     union     - string     - arrayOf [         string       ]   } ]		Список загруженных файлов
inputProps		object	{}	Объект дополнительных свойств для input[type="file"] элемента
isShow		bool	false	Включен ли режим просмотра (отображается только список файлов, по умолчанию нет кнопки удаления)
isDragAndDrop		bool	true	Показывать ли поле для драг-н-дропа
renderFile		func	(fileId, props, FileBlockComponent) => (<FileBlockComponent {...props} key={fileId} />)	Функция для переопределения рендера загруженных или загружающихся файлов @param {string
uploadFile	+	func		Асихнхронная функция загрузки файла на сервер @async @param {File} file - файл для загрузки @return {Promise<{id, name, url, size, extension}>} - описание загруженного файла
onUploadFile		func	Function.prototype	Обработчик успшной загрузки файла @param {UploaderFile} file- загруженный файл
onRemoveFile		func	Function.prototype	Обработчик удаления загруженного файла @param {number} fileIndex - индекс файла для удаления @param {FileId} fileId - id файла для удаления @param {UploaderFile} file - файл для удаления
onChange		func	Function.prototype	Обработчик изменения списка файлов @param {UploaderFile[]} files - новый список файлов
showDownloadControl		bool	true	Показывать ли кнопку скачивания файла
showRemoveControl		bool	true	Показывать ли кнопку удаления файла
getControls		func	defaultGetControls	Функция, создающая конфигурацию кнопок для управления файлом, перекрывает свойства showRemoveControl и showDownloadControl @param {Object} params - объект параметров @param {UploaderFile} params.file - описание файла @param {boolean} params.disabled - выключено ли поле загрузки @param {boolean} params.showDownloadControl - описано выше @param {boolean} params.showRemoveControl - описано выше @param {Function} params.removeFile - функция удаления текущего файла из списка

UploadFileError

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

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

const uploadFile = async () {
  // ...

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