vue-dropzone

Its a simple Vue.js dropzone directive.

Usage inside component

import VueDropzone from "vue-dropzone";
export default {
  directives: {
    'dropzone': VueDropzone
  }
}

Global usage

import  VueDropzone  from  "vue-dropzone";
Vue.use(VueDropzone);

# inside component
<div class="dropzone" v-dropzone>

Options

<template>
  <div class="el" v-dropzone:[dropzoneOptions.active]="dropzoneOptions"></div>
</template>
<script>
export default {
  data(){
    return {
      dropzoneOptions: {
        // `active` is a directive toggler ( whether the dropzone should be active or not ) 
        active: true,
        extensions: ["pdf"], // List of file extensions that the dropzone will accept
        // Below are all of the accepted callbacks
        onSuccess: this.onDropzoneUpload.bind(this),
        onError: this.onDropzoneUploadError.bind(this),
        onDragEnter: this.onDropzoneDragEnter.bind(this),
        onDragLeave: this.onDropzoneDragLeave.bind(this)
      }
    }
  },
  methods: {
    onDropzoneDragEnter() {},
    onDropzoneDragLeave() {},
    onDropzoneUpload(file) { // file is the ArrayBuffer
      let binarySrc = new Uint8Array(file);
    },
    onDropzoneUploadError(msg) {}, // msg is the Error message
  }
}
</script>