@n3/react-fileuploader NPM

@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	`{}`	Объект дополнительных свойств для inputtype="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',
  ]);
}

@n3/css-base @types/lodash.uniqueid es6-error lodash.isequal lodash.uniqueid styled-components

@infinitebrahmanuniverse/nolb-_n3 @everything-registry/sub-chunk-631 @n3/react-form-kit

2 months ago

3 months ago

4 months ago

5 months ago

5 months ago