From cf0b5123e297f1d16c0c95ca20cc7525a2ddea8c Mon Sep 17 00:00:00 2001
From: palytoxin <sxty32@gmail.com>
Date: Thu, 13 Aug 2020 10:11:40 +0800
Subject: [PATCH] dropzone init improvement

---
 templates/repo/datasets/index.tmpl      |  2 +-
 web_src/js/components/MinioUploader.vue | 13 ++++++++++---
 web_src/js/index.js                     |  8 ++++++--
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/templates/repo/datasets/index.tmpl b/templates/repo/datasets/index.tmpl
index da5058c39..7dc5bb9b8 100755
--- a/templates/repo/datasets/index.tmpl
+++ b/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>
diff --git a/web_src/js/components/MinioUploader.vue b/web_src/js/components/MinioUploader.vue
index c9d873eb6..850cacfca 100755
--- a/web_src/js/components/MinioUploader.vue
+++ b/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>
\ No newline at end of file
+.ui .dropzone {
+    border: 2px dashed #0087f5;
+    box-shadow: none !important;
+    padding: 0;
+    min-height: 5rem;
+    border-radius: 4px;
+}
+</style>
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 5d5021254..46e4c23a3 100755
--- a/web_src/js/index.js
+++ b/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 />'
   });