Skip to content
No description or website provided.
Vue JavaScript HTML
Branch: master
Clone or download
Latest commit d960cb8 Mar 4, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
docs
src
.babelrc
.eslintrc
.gitignore
.npmignore
README.md
index.html
package.json

README.md

npm version

vue version

Introduction

Droply is a tiny Dropzone wrapper for the VueJS 2.

Installation

NPM Based WorkFlows

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

$ yarn add droply --dev

Browser Globals

Just include vue and droply from the NPM CDN and you're ready to go:

<!-- use the latest release -->
<script src="https://npmcdn.com/droply@latest"></script>

<!-- or point to a specific release -->
<script src="https://npmcdn.com/droply@0.0.2"></script>

Usage

You'll also need to load the FontAwesome icon kit:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Next step is to import the module:

import Droply from 'droply'

Then you can register it globaly using Vue.component() or inside a components object.

Example

<template>
    <div class="container">
        <div class="row justify-content-md-center">
            <div class="col-6">
                <p class="text-center">
                    This is as simple Dropzone demo using Vue.js
                </p>
                <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>
            </div>
        </div>
        <div class="row justify-content-md-center">
            <div class="col-2 text-center">
                <button v-if="showRemoveAllButton" class="btn btn-primary" @click="removeAll()">Remove all</button>
            </div>
        </div>
    </div>
</template>

<style>
    @import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
    
    html, body {
        height: 100vh;
        background-color: #F9F9F9;
    }
    .row {
        margin-top: 1rem;
    }
</style>

<script>
  import Droply from 'droply'

  export default {
    name: 'MainApp',
    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()
      }
    }
  }
</script>

License

Droply is open-sourced software licensed under the MIT license

You can’t perform that action at this time.