Fixes #127. Error message positioned incorrectly.

Author: vrajroham

dev/bundle.js

@@ -7,9 +7,10 @@
             <dropzone ref="myVueDropzone" id="dropzone" url="https://httpbin.org/post"
                       v-on:vdropzone-success="showSuccess"
                       v-bind:dropzone-options="dropzoneOptions"
-                      v-bind:max-number-of-files="2"
+                      v-bind:max-number-of-files="1"
                       v-bind:use-custom-dropzone-options="true">
             </dropzone>
+            <button @click="process">Process</button>
         </div>
     </div>
 </template>
@@ -40,6 +41,9 @@
             'process': function () {
                 console.log(this.$refs.myVueDropzone);
                 // this.$refs.myVueDropzone.setOption('maxFiles', this.$refs.myVueDropzone.dropzone.options.maxFiles + 1)
+                var file = { size: 123, name: "Icon" };
+                var url = "https://myvizo.com/img/logo_sm.png";
+                this.$refs.myVueDropzone.manuallyAddFile(file, url);
                 console.log(this.$refs.myVueDropzone.dropzone.options.maxFiles);
             }
         }

dev/bundle.js.map

@@ -68,13 +68,12 @@
                 default: (options) => {
                     return `
                         <div class="dz-preview dz-file-preview">
-                            <div class="dz-image" style="width: ${options.thumbnailWidth}px;height: ${options.thumbnailHeight}px">
-                                <img data-dz-thumbnail /></div>
+                            <div class="dz-image" style="width: ${options.thumbnailWidth}px;height: ${options.thumbnailHeight}px">                                
+                            <img data-dz-thumbnail /></div>
                             <div class="dz-details">
-                              <div class="dz-size"><span data-dz-size></span></div>
-                              <div class="dz-filename"><span data-dz-name></span></div>
+                                <div class="dz-size"><span data-dz-size></span></div>
+                                <div class="dz-filename"><span data-dz-name></span></div>
                             </div>
-
                             <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
                             <div class="dz-error-message"><span data-dz-errormessage></span></div>
                             <div class="dz-success-mark">${options.doneIcon}</div>
@@ -401,6 +400,11 @@
                     font-size: 5rem !important;
                 }
             }
+
+            .dz-error-message {
+                top: calc(50% + 25px);
+                left: calc(50% - 35px);
+            }
         }
     }
 </style>