# vue-auto-dropzone

> Vue 2 Dropzone.js component

Latest version **0.2.0** (published 2020-02-23) · 0 weekly downloads

## Install

```sh
npm install vue-auto-dropzone
pnpm add vue-auto-dropzone
yarn add vue-auto-dropzone
bun add vue-auto-dropzone
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2020-02-23 |
| First published | 2019-10-10 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 2.1 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 21 |
| Author | Karl Tarvas |
| Maintainers | etheryte |

## Links

- npm: https://www.npmjs.com/package/vue-auto-dropzone
- Repository: https://github.com/Etheryte/vue-auto-dropzone
- Issues: https://github.com/Etheryte/vue-auto-dropzone/issues
- npm.io page: https://npm.io/package/vue-auto-dropzone

## Dependencies (5)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [dropzone](https://npm.io/package/dropzone.md) ^5.7.0
- [npm-watch](https://npm.io/package/npm-watch.md) ^0.6.0
- [typescript](https://npm.io/package/typescript.md) 3.6.4
- [@types/dropzone](https://npm.io/package/@types/dropzone.md) ^5.0.6

## Recent versions

- 0.2.0 (latest) — 2020-02-23
- 0.1.3 (beta) — 2019-10-15
- 0.1.13 — 2019-12-31
- 0.1.12 — 2019-10-24
- 0.1.11 — 2019-10-23
- 0.1.10 — 2019-10-22
- 0.1.9 — 2019-10-22
- 0.1.8 — 2019-10-22
- 0.1.7 — 2019-10-22
- 0.1.6 — 2019-10-21
- 0.1.5 — 2019-10-21
- 0.1.4 — 2019-10-17
- 0.1.2 — 2019-10-15
- 0.1.1 — 2019-10-11
- 0.1.0 — 2019-10-10

## README

# vue-auto-dropzone

A [Dropzone.js](https://www.dropzonejs.com) component for Vue.  
Typescript support, native slots, and more.

## Installation
```sh
yarn install vue-auto-dropzone
```

## Basic usage
```html
<template>
    <vue-auto-dropzone ref="dz" :options="options" />
</template>
<script lang="ts">
    import Vue from 'vue';

    import VueAutoDropzone from 'vue-auto-dropzone';

    export default Vue.extend({
        components: {
            VueAutoDropzone,
        },
        data() {
            return {
                options: {
                    url: 'https://httpbin.org/anything',
                },
            };
        },
        mounted() {
            // The Dropzone instance is available after mounting
            const dz = this.$refs.dz;
        }
    });
</script>
```

## Slots

All content is configurable by [slots](https://vuejs.org/v2/guide/components-slots.html).  
Slots receive the instance itself as their [scope](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots), meaning all relevant fields are directly accessible.  
To omit default styling on the slot, also specify `:include-styling="false"`.  

```html
<vue-auto-dropzone :options="options" :include-styling="false" v-slot="{ files, removeFile }">
    <p v-if="!files.length">Give me fuel, give me files</p>

    <figure v-for="file in files" :key="file.upload.uuid" @click="removeFile(file)">
        <img v-if="file.dataURL" :src="file.dataURL" :alt="file.name" />
        <figcaption>
            {{file.name}}
            <span v-if="file.upload.progress !== 100">{{ file.upload.progress.toFixed(0) }}%</span>
        </figcaption>
    </figure>
</vue-auto-dropzone>
```

## Props

| Name | Type | Default | Description | Required |
| --- | --- | --- | --- | --- |
| `options` | `Object` | `undefined` | an object containing [Dropzone configuration options](https://www.dropzonejs.com/#configuration-options) | `true` | the `url` field is mandatory |
| `includeStyling` | `Boolean` | `true` | whether to include default Dropzone styles on the component | `false` |
| `destroyDropzone` | `Boolean` | `true` | whether to destroy the Dropzone instance on component unmount | `false` |


## Events

All [Dropzone events](https://www.dropzonejs.com/#event-list) are emitted on the component with identical names and parameters.  
Use [standard Vue event handling](https://vuejs.org/v2/guide/events.html) to listen for events and respond to them.

```html
<vue-auto-dropzone
    :options="options"
    @drop="onDrop"
    @success="onSuccess"
/>
```

## Properties

Properties are exposed directly on the component.

```ts
mounted() {
    const dz = this.$refs.dz;
    const files = dz.files;
}
```

### Property list

| Name | Description |
| --- | --- |
| `files` | Array of all files |
| `acceptedFiles` | Array of all accepted files |
| `rejectedFiles` | Array of all rejected files |
| `queuedFiles` | Array of all files queued for upload |
| `uploadingFiles` | Array of all files currently uploading |
| `addedFiles` | Array of all added files |
| `activeFiles` | Array of all queued or currently uploading files |
| `defaultOptions` | Object containing default [Dropzone configuration values](https://www.dropzonejs.com/#configuration-options) |
| `events` | Array of all event names the instance supports |
| `hiddenFileInput` | A reference to the [input element used by Dropzone](https://www.dropzonejs.com/#config-hiddenInputContainer) |
| `listeners` | Array of all elements with relevant listeners used by Dropzone |
| `version` | Bundled Dropzone version |

## Methods

Methods are exposed directly on the component.  
The instance is available once the component is [mounted](https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram).

```ts
mounted() {
    const dz = this.$refs.dz;
    // Manually add a file
    dz.addFile('data:image/png;...', 'image.png');
}
```

### Method list

| Method | Description |
| --- | --- |
| `getOptions()` | Get all currently set [Dropzone configuration values](https://www.dropzonejs.com/#configuration-options) |
| `setOptions(value: Partial<IDropzoneOptions>)` | Set multiple configuration options at a time |
| `getOption(key: keyof IDropzoneOptions)` | Get the value of a single configuration option by key |
| `setOption(key: keyof IDropzoneOptions, value: any)` | Set a single configuration option |
| `addFile(file: File \| string, fileName?: string, mimeType?: string)` | Manually add a new file without triggering upload hooks. Input is either a `File` or a data string (`"data:image/..."`) with a file name and optional mime type |
| `addAndUploadFile(file: File \| string, fileName?: string, mimeType?: string)` | Manually add a new file and trigger all regular upload hooks. Input is either a `File` or a data string (`"data:image/..."`) with a file name and optional mime type |
| `removeFile(file: File)` | Remove the given file |
| `removeAllFiles(includeUploading = false)` | Remove all currently not uploading files, call `removeAllFiles(true)` to also remove actively uploading files |
| `processQueue()` | Process the upload queue when [`autoProcessQueue` is disabled](https://www.dropzonejs.com/#config-autoProcessQueue) |
| `disable()` | Disable the instance, also removes event listeners etc |
| `enable()` | Reenable the instance |
| `createThumbnailFromUrl(file: File, sourceUrl: string, callback?: () => any, crossOrigin?: boolean)` | Create a thumbnail to [display files already stored on the server](https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server) |
| `setParams()` | Override [the `params()` function](https://www.dropzonejs.com/#config-params) |
| `setAccept()` | Override [the `accept()` function](https://www.dropzonejs.com/#config-accept) |
| `setChunksUploaded()` | Override [the `chunksUploaded()` function](https://www.dropzonejs.com/#config-chunksUploaded) |
| `setFallback()` | Override [the `fallback()` function](https://www.dropzonejs.com/#config-fallback) |
| `setResize()` | Override [the `resize()` function](https://www.dropzonejs.com/#config-resize) |
| `setTransformFile()` | Override [the `transformFile()` function](https://www.dropzonejs.com/#config-transformFile) |

Additional methods on the instance expose the internal Dropzone instance, but those are officially unsupported as they may change with a new Dropzone release.  
All exposed internals come with corresponding setters similar to those shown above.

## Contributing

Currently, this repo is iterating reasonably fast and the style is subject to change over time.  
Pull requests are discouraged, but issue reports and feature requests are very welcome.

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