# Компонент BaseUploader

Компонент загрузчика, загружает файлы на сервер.

### Использование компонента:

Компонент базовый, поэтому использование в проекте возможно без импорта.

```html
<template>
  <base-uploader />
</template>
```

### Описание props

Поддерживаемые параметры.

1. `accept` - Строка, содержащая в себе значение поддерживаемых расширений для загружаемых файлов, например: `accept=".jpg, .pdf, image/*"` или `accept="image/jpeg, .pdf"`.
2. `description` - Предзаполненная строка, которая добавляется в поле "Описание". Значение `string`. Необязательный `prop`.
3. `show-description` - Флаг, определяющий присутствие описания для загружаемых файлов (добавляет соответствующее поле ввода). Значение `true|false`.
4. `show-action` - Флаг, определяющий отображать кнопку загрузить или нет. Значение `true|false` (При значение `false`, событие `@upload` не вызывается). Необязательный.
5. `disable` - Необязательный `props`, принимает значение `true|false`, отвечает за то, будет ли заблокирован компонент загрузки.
6. `multiple` - Флаг, определяющий режим загрузки (возможность выбрать/загрузить множество файлов одновременно). Значение `true|false`. Необязательный.
7. `rules` - Массив функций, определяющих кастомную валидацию. Необязательный.

### События

1. `@clear -> function (files: File[])` - Событие, возникающее при полном удалении выбранных файлов. Возвращает список файлов, которые были удалены.
2. `@input -> function (files: File[])` - Событие, возникающее при частичном/полном добавлении/удалении выбранных файлов. Возвращает список файлов, которые были добавлены/удалены.
3. `@upload -> function (files: File[], done: () => void)` - Событие, возникающее при начале загрузки файлов. Реализацию самой загрузки нужно описывать отдельно. Возвращает список файлов, которые были приняты в загрузку, а также функцию `done`, которую необходимо вызывать по завершению загрузки (неважно успешная она или нет).

### Слоты

Слоты для данного компонента не предусмотрены.

### Пример использования

`*.html`

```html
<base-uploader
  @clear="clearHandler"
  @input="inputHandler"
  @upload="uploadHandler"
  :description="'Hello Kitty'"
  :multiple="true"
  :rules="[(val) => val.length > 2 || 'Invalid format']"
  accept=".jpg, .pdf, image/*"
/>
```

---

`*.ts`

```ts
function clearHandler(files: File[]): void {
  // some code here...
}

function inputHandler(files: File[]): void {
  // some code here...
}

function uploadHandler(
  data: {
    description?: string;
    files: File[];
  },
  done: () => void
): void {
  setTimeout(() => {
    // some code here...

    done();
  }, 2000);
}
```
