vue2-dropzone-multiple v2.3.6

vue-dropzone

A Vue component for file uploads, powered by Dropzone.js. Check out the demo.

Install

// For Vue.js 2.0+
npm install vue2-dropzone@^2.0.0

You'll also need to load either the Material Icon or FontAwesome icon kits depending on which style of icon you'd like.

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Usage

1. Import the module (import Dropzone from 'vue2-dropzone')
2. Register it as a component as you would any other Vue component
3. Use it within your template

Example

<template>
  <div id="app">
    <p>Welcome to your Vue.js app!</p>

    <dropzone id="myVueDropzone" url="https://httpbin.org/post" v-on:vdropzone-success="showSuccess">
        <!-- Optional parameters if any! -->
        <input type="hidden" name="token" value="xxx">
    </dropzone>

  </div>
</template>

<script>
  import Dropzone from 'vue2-dropzone'

  export default {
    name: 'MainApp',
    components: {
      Dropzone
    },
    methods: {
      'showSuccess': function (file) {
        console.log('A file was successfully uploaded')
      }
    }
  }
</script>

Props

Many of these props are inherited from dropzone configuration so see their doco for further details.

Important : - If you are using following options as props (attributes) to component then use dash-seperated names of props. E.g. paramName becomes :param-name="", showRemoveLink becomes :show-remove-link="". - If you are passing props using dropzoneOptions object then, use prop names same as given in below table. E.g. :dropzone-options="customOptionsObject". customOptionsObject is defined in data() with following props names.

Custom Dropzone preview template

NOTE : Props like thumbnailWidth,thumbnailHeight, useFontAwesome will not work when you override the dropzone preview. No worry you can refer demo file to achieve same. :) Don't forgot to add your styles in <style>

Custom Dropzone Template Demo File

Methods

Methods you can call on the component.

Using Methods

Methods can be called from your parent component by making use of the special tag "ref".

When you initialize the component add a unique ID to the dropzone element using the ref tag, like this

<dropzone ref="myUniqueID"></dropzone>

Then from your parent Vue instance, you can call the methods by using the following:

vm.$refs.myUniqueID.processQueue()
//vm refers to your current instance

Events

Events emitted by the component to the parent.

Development

# install dependencies
npm install

# serve example at localhost:8080
npm run dev

# build any changes made
npm run build