1.0.5 • Published 1 year ago

greksazoos-vue3-dropzone v1.0.5

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

This is made from @jaxtheprime/vue3-dropzone.

Made some modification on it:

  • Select button after select files
  • remove Removebutton

Installation

  • Install Yarn package
yarn add greksazoos-vue3-dropzone
  • Install NPM package
npm install greksazoos-vue3-dropzone

Usage

Local registration:

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

<script>
    import Vue3Dropzone from "greksazoos-vue3-dropzone";
    import 'greksazoos-vue3-dropzone/dist/style.css'

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

Props

PropTypeDefaultNote
modelValueArray[]2 way binding ref
multipleBooleanfalseMakes dropzone accept multiple files
previewsArray[]Preview images links (works with mode props)
modestringdropDefines dropzone functionality to accept drops or just preview images
disabledBooleanfalseDisables the whole dropzone
acceptArray[]Accepted type of files
maxFileSizeNumber5Max file size in Megabytes
maxFilesNumber5Max files accepted by dropzone
widthNumber StringundefinedDropzone container width
heightNumber StringundefinedDropzone container height
imgWidthNumber StringundefinedPreview images width
imgHeightNumber StringundefinedPreview images height
previewWrapperClassesStringundefinedPreview images container classes
blurOnClickOutsideBooleantrueRemoves state on click outside
showSelectButtonBooleantrueSelect files button in the dropzone
messageStringundefinedMessage under the dropzone area
removeButtonBooleantrueEnables RemoveButton

About the Project

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...

Installation

  • Install Yarn package
yarn add @jaxtheprime/vue3-dropzone
  • Install NPM package
npm install @jaxtheprime/vue3-dropzone

Usage

Local 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>

Props

PropTypeDefaultNote
modelValueArray[]2 way binding ref
multipleBooleanfalseMakes dropzone accept multiple files
previewsArray[]Preview images links (works with mode props)
modestringdropDefines dropzone functionality to accept drops or just preview images
disabledBooleanfalseDisables the whole dropzone
acceptArray[]Accepted type of files
maxFileSizeNumber5Max file size in Megabytes
maxFilesNumber5Max files accepted by dropzone
widthNumber StringundefinedDropzone container width
heightNumber StringundefinedDropzone container height
imgWidthNumber StringundefinedPreview images width
imgHeightNumber StringundefinedPreview images height
previewWrapperClassesStringundefinedPreview images container classes
blurOnClickOutsideBooleantrueRemoves state on click outside
showSelectButtonBooleantrueSelect files button in the dropzone
messageStringundefinedMessage under the dropzone area

Slots

Namedata
buttonfileInput
previewdata
descriptionundefined
placeholder-imgundefined
titleundefined

Css variables

NameValue
--v3-dropzone--primary94, 112, 210
--v3-dropzone--border214, 216, 220
--v3-dropzone--description190, 191, 195
--v3-dropzone--overlay40, 44, 53
--v3-dropzone--overlay-opacity0.3
--v3-dropzone--error255, 76, 81
--v3-dropzone--success36, 179, 100

Contact

Emad Moghimi jaxtheprime@gmail.com

Project Link: https://github.com/JaxThePrime/vue3-dropzone

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago