Dropzone

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

Файл: app/components/ui/select/Select.vue

Быстрый старт

Перетащите файлы сюда

Файлы должны быть не более 10 MB

<script setup lang="ts">
import { Dropzone } from 'components/ui/dropzone';

const files = ref<File[]>([]);
</script>

<template>
  <Dropzone v-model="files"/>
</template>

API

Props

Prop	Type	По умолчанию	Описание
`multiple`	`boolean`	`false`	Принимать ли множество файлов
`disabled`	`boolean`	`false`	-
`state`	'error', 'success', undefined	undefined	Состояние (ошибка, успех, неопределено)
`accept`	`string`	`undefined`	Доступные форматы файлов
`maxFileSize`	`number`	`10`	Максимальный размер файлов (MB)
`maxFiles`	`number`	`10`	Максимальное количество файлов
`name`	`string`	`undefined`	name для инпута с файлом
`width`	`number, string`	`undefined`	Ширина контейнера
`height`	`number, string`	`undefined`	Высота контейнера
`imgWidth`	`number, string`	`undefined`	Ширина превью для изображений
`imgHeight`	`number, string`	`undefined`	Высота превью для изображений
`previewWrapperClasses`	`string`	`undefined`	Дополнительные классы для контейнера
`previewPosition`	`inside, outside`	`inside`	Расположение превьюшек: внутри контейнера или вне
`showSelectButton`	`boolean`	`true`	Отображение кнопки с выбором
`selectFileStrategy`	`replace, merge`	`replace`	Стратегия редактирования файлов: замена или добавление

Models

Model	Type	По умолчанию
`modelValue`	`DropzoneFile[]`	undefined

Emits

Emit	Type	Триггер
`update:modelValue`	`Array`	Изменение спика файлов
`drop`	`Event`	Перетаскивание файла в дропзону
`fileRemoved`	`Object`	Удаление файла из списка

Slots

Slot	Назначение
`placeholder-img`	Заменяет заглушку
`title`	Заменяет текст "Перетащите файлы сюда"
`button`	Заменяет кнопку "Выбрать файл"
`description`	Заменяет описание с требованиями к файлу
`preview`	Кастомное превью для картинок

Methods

Method	Параметры	Назначение
`clearFiles()`	-	Очищает список файлов

Варианты

С множеством файлов

Перетащите файлы сюда

Файлы должны быть не более 10 MB

<script setup lang="ts">
import { Dropzone } from 'components/ui/dropzone';

const files = ref<File[]>([]);
</script>

<template>
  <Dropzone 
    v-model="files"
    multiple
  />
</template>

Без кнопки

Перетащите файлы сюда

Файлы должны быть не более 10 MB

<script setup lang="ts">
import { Dropzone } from 'components/ui/dropzone';

const files = ref<File[]>([]);
</script>

<template>
  <Dropzone 
    v-model="files"
    :showSelectButton="false"
  />
</template>

C определенным размером и форматом

Перетащите файлы сюда

Файлы должны быть не более 10 MB и в формате image/png image/jpeg

<script setup lang="ts">
import { Dropzone } from 'components/ui/dropzone';

const files = ref<File[]>([]);
</script>

<template>
  <Dropzone 
    v-model="files"
    :maxFileSize="10"
    accept="image/png, image/jpeg"
  />
</template>

Отображение превьюшек вне дропзоны

Перетащите файлы сюда

Файлы должны быть не более 10 MB

<script setup lang="ts">
import { Dropzone } from 'components/ui/dropzone';

const files = ref<File[]>([]);
const previews = ref<string[]>(['https://coffeestudio.ru/static/images/svg/header-logo.svg'])
</script>

<template>
  <Dropzone 
    v-model="files"
    v-model:previews="previews"
    mode="edit"
    multiple
    previewPosition="outside"
    previewWrapperClasses="bg-gray-100 p-4 rounded-lg border-2 border-dashed border-gray-300"
  />
</template>