@n3/react-fileuploader

@n3/react-fileuploader

Установка

npm install @n3/react-fileuploader

API

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

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

...

<FileUploader
  files={files}
  disabled={disabled}
  multiple={multiple}
  help={help}
  uploadFile={uploadFile}
  onChange={onChangeFiles}
/>

Props

• files - обязательное, массив файлов вида:
  • id: String | Number - обязательное, id файла
  • name: String - обязательное, название файла
  • size: Number - размер файла в байтах
  • extension: String - расширение файла
• disabled: Boolean - выключено ли поле ввода, по умолчанию false
• multiple: Boolean - возможен ли выбор нескольких файлов в инпуте, по умолчанию true
• help: React Node - контент блока справа от кнопки, по умолчанию null
• inputProps: Object - объект дополнительных свойств для input[type="file"] элемента
• renderFile: (fileId, props, FileBlockComponent) => Element - функция для переопределения рендера загруженных или загружающихся файлов. FileBlockComponent - оригинальный компонент для рендера лейбла файла, props - оригинальные props, которые принимает FileBlockComponent, fileId - id файла
• uploadFile: (File) => Promise<{id, name, size, extension}> - функция аплоада файла на сервер, должна возвразать Promise, который резолвится с объектом нового файла для списка, и режектится в случае ошибки
• onChange: (file[]) => void - колбэк, который вызывается при изменении списка файлов

PropTypes

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

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

Стили

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

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