Vue3-simple-dropzone NPM

vue3-simple-dropzone

vue3-simple-dropzone is file uploader componet for your Vue-3 project. At this moment this works for only single file uploading.

Find it at npm

Demo

Get source of the demo at https://github.com/fmabid/dpmaker

Installation

Run:

npm i vue3-simple-dropzone

How to use?

To change style pass your css class name to the props className.
Use onSelect to handle event.

Example:

npm.io

<template>
  <Dropzone className="boxStyle" @onSelect="handler">
    <p>Drop file here</p>
  </Dropzone>
</template>

<script setup lang="ts">
import Dropzone from "vue3-simple-dropzone";

function handler(event) {
  // Handel event
}
</script>

<style>
.boxStyle {
  background-color: rgb(254, 255, 233) !important;
}
</style>

Options:

Prop	Type	Description
`className`	`string`	This is optional. To change style pass class names as string.
`accept`	`string`	This is optional. Pass the file types(`audio/`, `video/`, `image/*`, file_extension `(e.g: .gif, .jpg, .png, .doc)`) that you want to pick from the file input dialog box.