@n3/react-fileuploader

File uploader component for react applications

Stats

StarsIssuesVersionUpdatedCreatedSize
@n3/react-fileuploader
0.6.08 months ago4 years agoMinified + gzip package size for @n3/react-fileuploader in KB

Readme

@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

Название Обязательность Тип Значение по умолчанию Описание
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 - функция удаления текущего файла из списка

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';

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.