# @n3/react-fileuploader
> File uploader component for react applications
Latest version **0.9.9** (published 2024-03-18) · MIT license · 0 weekly downloads
## Install
```sh
npm install @n3/react-fileuploader
pnpm add @n3/react-fileuploader
yarn add @n3/react-fileuploader
bun add @n3/react-fileuploader
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.9.9 |
| Published | 2024-03-18 |
| First published | 2017-09-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 272.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Vadim Taits |
| Maintainers | a.kamaev, d.lukyanov, avataka, alex.skachkov, v.voloshin, n3admin, vtaits, k.kulik, a_sannikov |
## Links
- npm: https://www.npmjs.com/package/@n3/react-fileuploader
- Repository: git@gitlab.develop.netrika.ru:web/n3components
- npm.io page: https://npm.io/package/@n3/react-fileuploader
## Dependencies (6)
- [es6-error](https://npm.io/package/es6-error.md) ^4.1.1
- [@n3/css-base](https://npm.io/package/@n3/css-base.md) ^1.17.2
- [lodash.isequal](https://npm.io/package/lodash.isequal.md) ^4.5.0
- [lodash.uniqueid](https://npm.io/package/lodash.uniqueid.md) ^4.0.1
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.11
- [@types/lodash.uniqueid](https://npm.io/package/@types/lodash.uniqueid.md) ^4.0.6
## Recent versions
- 0.9.9 (latest) — 2024-03-18
- 0.9.8 — 2024-02-09
- 0.9.7 — 2024-01-25
- 0.9.6 — 2023-12-22
- 0.9.5 — 2023-12-21
- 0.9.4 — 2023-12-19
- 0.9.3 — 2023-12-19
- 0.9.2 — 2023-12-19
- 0.9.1 — 2023-11-27
- 0.9.0 — 2023-11-13
- 0.8.1 — 2023-08-09
- 0.8.0 — 2023-04-28
- 0.7.1 — 2023-04-18
- 0.7.0 — 2023-04-12
- 0.6.0 — 2021-01-26
- … 20 more at https://npm.io/package/@n3/react-fileuploader/versions
## README
# @n3/react-fileuploader
## Установка
```
npm install @n3/react-fileuploader
```
## API
### Использование
```typescript
import { FileUploader } from '@n3/react-fileuploader';
...
```
### 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) => ()` | Функция для переопределения рендера загруженных или загружающихся файлов
@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`
```typescript
import { UploadFileError } from '@n3/react-fileuploader';
const uploadFile = async () {
// ...
throw new UploadFileError([
'error1',
'error2',
'error3',
]);
}
```
---
_Source: https://npm.io/package/@n3/react-fileuploader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._