A working drop zone example

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 dist/
+npm-debug.log

package.json

@@ -14,6 +14,10 @@
   ],
   "author": "Johannes Zillmann",
   "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jzillmann/pdf-to-markdown"
+  },
   "dependencies": {
     "vue": "^2.0.5"
   },
@@ -27,6 +31,7 @@
     "css-loader": "^0.25.0",
     "file-loader": "^0.9.0",
     "html-webpack-plugin": "^2.24.1",
+    "sass-loader": "^4.0.2",
     "url-loader": "^0.5.7",
     "vue-loader": "^9.8.1",
     "webpack": "^1.13.3"

src/App.vue

@@ -1,18 +1,29 @@
 <template>
   <div id="app">
     <img src="./assets/logo.png">
-    <hello></hello>
+     <dropzone id="myVueDropzone" url="https://httpbin.org/post" v-on:vdropzone-success="showSuccess" v-on:vdropzone-fileAdded="fileAdded"></dropzone>
   </div>
 </template>
 
 <script>
 import Hello from './components/Hello'
+import Dropzone from './components/Dropzone'
 
 export default {
   name: 'app',
   components: {
-    Hello
-  }
+    Dropzone
+  },
+  methods: {
+      'fileAdded': function (file) {
+        console.log('A file was added: ')
+        console.log(file)
+      },
+      'showSuccess': function (file) {
+        console.log('A file was successfully uploaded: ')
+        console.log(file)
+      }
+    }
 }
 </script>
 

src/components/Dropzone.vue

@@ -0,0 +1,148 @@
+<template>
+<div id="wrapper">
+      <div class="dropzone-area" @dragenter="hovering = true" @dragleave="hovering = false" :class="{hovered: hovering}">
+          <div class="dropzone-text">
+              <span class="dropzone-title">Drop image here or click to select</span>
+          </div>
+          <input type="file" @change="onFileChange">
+      </div>
+  <div class="dropzone-preview">
+      <img :src="image" />
+      <button @click="removeImage" v-if="image">Remove</button>
+  </div>
+  </div>
+</template>
+
+<script>
+export default {
+    props : {
+            multiple : {
+                default : false
+            },
+            path : {
+                default : '/document/upload-unlinked/'
+            },
+            file : {
+                default : 'user_file'
+            },
+            files : {
+                default : function () { return [] }
+            },
+            target : {
+                default : 'dropzone'
+            },
+            clickable : {
+                default : false
+            },
+            previewTemplate : {
+                default : '<div style="display:none"></div>'
+            },
+            createImageThumbnails : {
+                default : false
+            }
+    },
+    data() {
+        return {
+            hovering : false,
+            image: null
+        }
+    },
+    computed: {
+        multipleUploads() {
+            return this.multiple ? true : false;
+        }
+    },
+    methods: {
+      onFileChange(e) {
+          console.debug('upload');
+          var files = e.target.files || e.dataTransfer.files;
+          console.debug(files);
+          if (!files.length) return;
+          this.createImage(files[0]);
+      },
+      createImage(file) {
+          var image = new Image();
+          var reader = new FileReader();
+          var vm = this;
+
+          reader.onload = (e) => {
+              vm.image = e.target.result;
+          };
+          reader.readAsDataURL(file);
+      },
+      removeImage: function (e) {
+          this.image = '';
+      }
+  }
+}
+
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang='sass' scoped>
+  .dropzone-area {
+    width: 80%;
+    height: 200px;
+    position: relative;
+    border: 2px dashed #CBCBCB;
+    &.hovered {
+        border: 2px dashed #2E94C4;
+        .dropzone-title {
+          color: #1975A0;
+        }
+
+    }
+}
+
+.dropzone-area input {
+    position: absolute;
+    cursor: pointer;
+    top: 0px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+}
+
+.dropzone-text {
+    position: absolute;
+    top: 50%;
+    text-align: center;
+    transform: translate(0, -50%);
+    width: 100%;
+    span {
+        display: block;
+        font-family: Arial, Helvetica;
+        line-height: 1.9;
+    }
+}
+
+.dropzone-title {
+    font-size: 13px;
+    color: #787878;
+    letter-spacing: 0.4px;
+}
+
+.dropzone-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    display: none;
+}
+
+.dropzone-preview {
+    width: 80%;
+    position: relative;
+    &:hover .dropzone-button {
+        display: block;
+    }
+    img {
+      display: block;
+      height: auto;
+      max-width: 100%;
+    }
+    
+}
+</style>

webpack.config.js

@@ -39,6 +39,10 @@ module.exports = {
                 test: /\.vue$/,
                 loader: 'vue'
             },
+            {
+                test: /\.scss$/,
+                loaders: ["style", "css", "sass"]
+            },
             {
                 test: /\.png$/,
                 loader: "url-loader?limit=100000"