Upload files via Droply Dropzone wrapper for Vue.js 2

droply

Upload files by dropping or selecting them to the upload box, using the Droply component, a Dropzone wrapper for Vue 2.

Example

Installation

This is a recommended way of installation. You can use either npm or yarn package manager:

$ yarn add droply --dev

Usage

<droply id="myDroply"
    ref="droplyOne"
    url="https://httpbin.org/post"
    upload-message-text="Drop file(s) to upload <br><strong>or click</strong>"
    @droply-file-added="onFileAdded"
    @droply-removed-file="onFileRemoved"
    @droply-success="onSuccess">
</droply>

<button v-if="showRemoveAllButton" class="btn btn-primary" @click="removeAll()">Remove all</button>

import Droply from 'droply'

export default {
    name: 'app',
    components: {
        Droply
    },
    data () {
        return {
            processQueue: false,
            showRemoveAllButton: false
        }
    },
    methods: {
        onFileAdded() {
            this.showRemoveAllButton = true
        },
        onFileRemoved() {
            this.showRemoveAllButton = false
        },
        onSuccess(file) {
            console.log('A file was successfully uploaded')
        },
        removeAll() {
            this.$refs.droplyOne.removeAllFiles()
        }
    }
}

The repository is available on GitHub.