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

Latest version **1.2.2** (published 2026-04-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue3-simple-dropzone
pnpm add vue3-simple-dropzone
yarn add vue3-simple-dropzone
bun add vue3-simple-dropzone
```

## Health

**Score 50/100 (C)** — status: active.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2026-04-06 |
| First published | 2022-07-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | fmabid |
| Keywords | vue3, dropzone, uploader |

## Links

- npm: https://www.npmjs.com/package/vue3-simple-dropzone
- Repository: https://github.com/fmabid/vue3-simple-dropzone
- Issues: https://github.com/fmabid/vue3-simple-dropzone/issues
- npm.io page: https://npm.io/package/vue3-simple-dropzone

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.5.32

## Recent versions

- 1.2.2 (latest) — 2026-04-06
- 1.2.1 — 2026-04-05
- 1.2.0 — 2025-04-04
- 1.1.0 — 2023-05-10
- 1.0.4 — 2022-08-05
- 1.0.3 — 2022-08-01
- 1.0.2 — 2022-08-01
- 1.0.1 — 2022-08-01
- 1.0.0 — 2022-07-24

## README

## 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](https://www.npmjs.com/package/vue3-simple-dropzone)

<a href="https://www.npmjs.com/package/vue3-simple-dropzone"><img src="https://img.shields.io/npm/dt/vue3-simple-dropzone.svg?style=flat-square" alt="Downloads"></a>
<a href="https://www.npmjs.com/package/vue3-simple-dropzone"><img src="https://img.shields.io/npm/v/vue3-simple-dropzone.svg?style=flat-square" alt="Version"></a>

#### [Demo](https://dpmaker.vercel.app)

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

## Installation

Run:

```bash
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:

![](https://raw.githubusercontent.com/fmabid/vue3-simple-dropzone/master/doc/images/view.png)

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

---
_Source: https://npm.io/package/vue3-simple-dropzone · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._