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:

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

Events:

Event name	Description
onSelect	Emits the file object.