Customizable easy to use dropzone | Only supported for vue3
Demo
the features of this package include the following:
- Highly customizable
- Lightweight, powerful and easy to use <g-emoji class="g-emoji" alias="smile"
- Provides with image preview, multiple state like error success and disable, etc...
- Install Yarn package
yarn add @jaxtheprime/vue3-dropzone- Install NPM package
npm install @jaxtheprime/vue3-dropzoneLocal registration:
<template>
<Vue3Dropzone v-model="files"/>
</template>
<script>
import Vue3Dropzone from "@jaxtheprime/vue3-dropzone";
import '@jaxtheprime/vue3-dropzone/dist/style.css'
const files = ref([])
};
</script>| Prop | Type | Default | Note |
|---|---|---|---|
modelValue |
Array |
[] | 2 way binding ref |
multiple |
Boolean |
false | Makes dropzone accept multiple files |
previews |
Array |
[] | Preview images links (works with mode props) |
mode |
string |
drop | Defines dropzone functionality to accept drops or just preview images |
disabled |
Boolean |
false | Disables the whole dropzone |
accept |
Array |
[] | Accepted type of files |
maxFileSize |
Number |
5 | Max file size in Megabytes |
maxFiles |
Number |
5 | Max files accepted by dropzone |
width |
Number String
|
undefined | Dropzone container width |
height |
Number String
|
undefined | Dropzone container height |
imgWidth |
Number String
|
undefined | Preview images width |
imgHeight |
Number String
|
undefined | Preview images height |
previewWrapperClasses |
String |
undefined | Preview images container classes |
blurOnClickOutside |
Boolean |
true | Removes state on click outside |
showSelectButton |
Boolean |
true | Select files button in the dropzone |
message |
String |
undefined | Message under the dropzone area |
| Name | data |
|---|---|
button |
fileInput |
preview |
data |
description |
undefined |
placeholder-img |
undefined |
title |
undefined |
| Name | Value |
|---|---|
--v3-dropzone--primary |
94, 112, 210 |
--v3-dropzone--border |
214, 216, 220 |
--v3-dropzone--description |
190, 191, 195 |
--v3-dropzone--overlay |
40, 44, 53 |
--v3-dropzone--overlay-opacity |
0.3 |
--v3-dropzone--error |
255, 76, 81 |
--v3-dropzone--success |
36, 179, 100 |
Emad Moghimi jaxtheprime@gmail.com
Project Link: https://github.com/JaxThePrime/vue3-dropzone