Dropzone

The Dropzone component provides an easy and user-friendly way to upload files using drag & drop or click-to-upload. It includes built-in support for file validation, image preview, and cropping.

Installation

npx shadcn-vue@latest add https://lib.adrianondik.com/r/dropzone.json

Usage

<template>
    <Dropzone />
</template>

<script setup lang="ts">
import Dropzone from '@/Components/Dropzone';
</script>

Props

Prop	Type	Description
maxFiles	number	Maximum number of files that can be uploaded at once. Additional files will be rejected.
maxSize	number	Maximum allowed file size in bytes. Files exceeding this limit will trigger a validation error.
accept	string[]	List of accepted MIME types or file extensions (e.g. image/png, image/jpeg).
modelValue	File[]	Current list of uploaded files. Used for v-model binding.
existingImage	string | null	URL of an existing image to display as a preview (e.g. previously uploaded image).
disabled	boolean	Disables the dropzone and prevents user interaction.
enableCrop	boolean	Enables image cropping before the file is accepted.
aspectRatio	number	Fixed aspect ratio for the crop area (e.g. 16/9, 1 for square). If not set, free cropping is allowed.

Examples

Disabled

<template>
    <Dropzone
        disabled
    />
</template>

<script setup lang="ts">
import Dropzone from '@/Components/Dropzone';
</script>

Enable Crop

<template>
    <Dropzone
        :enableCrop="true/false"
    />
</template>

<script setup lang="ts">
import Dropzone from '@/Components/Dropzone';
</script>

Max Files

Use any number, it depends on how many images you want to upload.

<template>
    <Dropzone
        :maxFiles="1"
    />
</template>

<script setup lang="ts">
import Dropzone from '@/Components/Dropzone';
</script>

Model Value

Uses the method to save the image to the database

<template>
    <Dropzone
        @update:model-value=""
    />
</template>

<script setup lang="ts">
import Dropzone from '@/Components/Dropzone';
</script>