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