@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 | number} fileId - id файла@param {Object} props - оригинальные props, которые принимает FileBlockComponent@param {'submitting' | 'ready' | 'error'} props.mode - местоположение файла (список загуженных/загружающихся/загруженных с ошибкой)@param {React.Component} FileBlockComponent - оригинальный компонент для рендера@param {number} index - индекс файла в списке | | 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',
  ]);
}