dropzone init improvement

templates/repo/datasets/index.tmpl

@@ -66,7 +66,7 @@
           </div>
           <div class="dataset ui middle very relaxed page">
             <div class="column">
-              <div id="uploader">
+              <div id="minioUploader">
               </div>
             </div>
           </div>

web_src/js/components/MinioUploader.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import Dropzone from 'dropzone/dist/dropzone.js';
+// import Dropzone from 'dropzone/dist/dropzone.js';
 // import 'dropzone/dist/dropzone.css'
 import createDropzone from '../features/dropzone.js';
 import SparkMD5 from 'spark-md5';
@@ -68,7 +68,7 @@ export default {
       file.previewTemplate.querySelector(".dz-upload").style.width = `${progress}%`;
     },
     emitDropzoneSuccess(file) {
-      file.status = Dropzone.SUCCESS;
+      file.status = "success";
       this.dropzoneUploader.emit("success", file);
       this.dropzoneUploader.emit("complete", file);
     },
@@ -328,4 +328,11 @@ export default {
 .dropzone-wrapper {
   margin: 2em auto ;
 }
-</style>
+.ui .dropzone {
+    border: 2px dashed #0087f5;
+    box-shadow: none !important;
+    padding: 0;
+    min-height: 5rem;
+    border-radius: 4px;
+}
+</style>

web_src/js/index.js

@@ -3168,9 +3168,13 @@ function initVueApp() {
 }
 
 function initVueUploader() {
-  /* eslint-disable no-new */
+  const el = document.getElementById('minioUploader');
+  if (!el) {
+    return;
+  }
+
   new Vue({
-    el: '#uploader',
+    el: '#minioUploader',
     components: {MinioUploader},
     template: '<MinioUploader />'
   });