npm package: @n3/react-fileuploader
Description: File uploader component for react applications
Author: Vadim Taits
Latest version: 0.9.9

# @n3/react-fileuploader

## Установка

```
npm install @n3/react-fileuploader
```

## API

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

```typescript
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 [<br>  shape {<br>  - id<br>    custom<br>  - name<br>    string<br>  - url<br>    string<br>  - size<br>    number<br>  - extension<br>    string<br>  - isImage<br>    bool<br>  - uploadErrors<br>    union<br>    - string<br>    - arrayOf [<br>        string<br>      ]<br>  }<br>] |  | Список загруженных файлов |
| inputProps |  | object | `{}` | Объект дополнительных свойств для input[type="file"] элемента |
| isShow |  | bool | `false` | Включен ли режим просмотра (отображается только список файлов, по умолчанию нет кнопки удаления) |
| isDragAndDrop |  | bool | `true` | Показывать ли поле для драг-н-дропа |
| renderFile |  | func | `(fileId, props, FileBlockComponent) => (<FileBlockComponent {...props} key={fileId} />)` | Функция для переопределения рендера загруженных или загружающихся файлов<br>@param {string | number} fileId - id файла<br>@param {Object} props - оригинальные props, которые принимает FileBlockComponent<br>@param {'submitting' | 'ready' | 'error'} props.mode - местоположение файла (список загуженных/загружающихся/загруженных с ошибкой)<br>@param {React.Component} FileBlockComponent - оригинальный компонент для рендера<br>@param {number} index - индекс файла в списке |
| uploadFile | + | func |  | Асихнхронная функция загрузки файла на сервер<br>@async<br>@param {File} file - файл для загрузки<br>@return {Promise<{id, name, url, size, extension}>} - описание загруженного файла |
| onUploadFile |  | func | `Function.prototype` | Обработчик успшной загрузки файла<br>@param {UploaderFile} file- загруженный файл |
| onRemoveFile |  | func | `Function.prototype` | Обработчик удаления загруженного файла<br>@param {number} fileIndex - индекс файла для удаления<br>@param {FileId} fileId - id файла для удаления<br>@param {UploaderFile} file - файл для удаления |
| onChange |  | func | `Function.prototype` | Обработчик изменения списка файлов<br>@param {UploaderFile[]} files - новый список файлов |
| showDownloadControl |  | bool | `true` | Показывать ли кнопку скачивания файла |
| showRemoveControl |  | bool | `true` | Показывать ли кнопку удаления файла |
| getControls |  | func | `defaultGetControls` | Функция, создающая конфигурацию кнопок для управления файлом, перекрывает свойства showRemoveControl и showDownloadControl<br>@param {Object} params - объект параметров<br>@param {UploaderFile} params.file - описание файла<br>@param {boolean} params.disabled - выключено ли поле загрузки<br>@param {boolean} params.showDownloadControl - описано выше<br>@param {boolean} params.showRemoveControl - описано выше<br>@param {Function} params.removeFile - функция удаления текущего файла из списка |

### UploadFileError

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

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

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

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