create i18n field to dropzone

options/locale/locale_en-US.ini

@@ -2426,6 +2426,13 @@ default_message = Drop files or click here to upload.
 invalid_input_type = You can not upload files of this type.
 file_too_big = File size ({{filesize}} MB) exceeds the maximum size of ({{maxFilesize}} MB).
 remove_file = Remove file
+file_status = Upload status:
+file_init_status = Drop files or click here to upload.
+waitting_uploading = Please wait for the first file transfer to complete
+md5_computing = MD5 computing
+loading_file = Loading
+uploading = Uploading
+upload_complete = Uploading complete
 
 [notification]
 notifications = Notifications

options/locale/locale_zh-CN.ini

@@ -2427,6 +2427,13 @@ default_message=拖动文件或者点击此处上传。
 invalid_input_type=您不能上传该类型的文件
 file_too_big=文件体积（{{filesize}} MB）超过了最大允许体积（{{maxFilesize}} MB）
 remove_file=移除文件
+file_status=文件处理状态：
+file_init_status=等待上传
+waitting_uploading=请等待文件传输完成
+md5_computing=计算MD5
+loading_file=加载文件
+uploading=正在上传
+upload_complete=上传完成
 
 [notification]
 notifications=通知

templates/repo/datasets/index.tmpl

@@ -66,7 +66,30 @@
           </div>
           <div class="dataset ui middle very relaxed page">
             <div class="column">
-              <div style='display:none;' id="minioUploader-params" data-uuid="{{.uuid}}" data-add-url="{{AppSubUrl}}/attachments/add" data-accepts="{{.AttachmentAllowedTypes}}" data-remove-url="{{AppSubUrl}}/attachments/delete" data-csrf="{{.CsrfToken}}" dataset-id={{.dataset.ID}} data-max-file="100"  data-dataset-id="{{.dataset.ID}}" data-max-size="{{.AttachmentMaxSize}}" data-default-message="{{.i18n.Tr "dropzone.default_message"}}" data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}" data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}" data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}">
+              <div style='display:none;'
+                id="minioUploader-params"
+                data-uuid="{{.uuid}}"
+                data-add-url="{{AppSubUrl}}/attachments/add"
+                data-accepts="{{.AttachmentAllowedTypes}}"
+                data-remove-url="{{AppSubUrl}}/attachments/delete"
+                data-csrf="{{.CsrfToken}}"
+                dataset-id={{.dataset.ID}}
+                data-max-file="100"
+                data-dataset-id="{{.dataset.ID}}"
+                data-max-size="{{.AttachmentMaxSize}}"
+                data-default-message="{{.i18n.Tr "dropzone.default_message"}}"
+                data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}"
+                data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}"
+                data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}"
+
+                data-file-status='{{.i18n.Tr "dropzone.file_status"}}'
+                data-file-init-status='{{.i18n.Tr "dropzone.file_init_status"}}'
+                data-waitting-uploading='{{.i18n.Tr "dropzone.waitting_uploading"}}'
+                data-md5-computing='{{.i18n.Tr "dropzone.md5_computing"}}'
+                data-loading-file='{{.i18n.Tr "dropzone.loading_file"}}'
+                data-upload-complete='{{.i18n.Tr "dropzone.upload_complete"}}'
+                data-uploading='{{.i18n.Tr "dropzone.uploading"}}'
+              >
               </div>
               <div id="minioUploader"></div>
             </div>

web_src/js/components/MinioUploader.vue

@@ -2,8 +2,7 @@
   <div class="dropzone-wrapper">
     <div id="dropzone" class="dropzone">
     </div>
-    <p>文件处理状态：{{ status }}</p>
-    <p>文件上传进度：{{ progress }}%</p>
+    <p>{{file_status_text}} {{ status }}</p>
   </div>
 </template>
 
@@ -29,12 +28,16 @@ export default {
       maxFilesize: 1 * 1024 * 1024 * 1024 * 1024,
       acceptedFiles: '*/*',
       progress: 0,
-      status: '等待上传',
+      status: '',
+      dropzoneParams: {},
+      file_status_text: '',
     }
   },
 
   async mounted() {
-    const $dropzoneParams = $('div#minioUploader-params')
+    this.dropzoneParams = $('div#minioUploader-params')
+    this.file_status_text = this.dropzoneParams.data('file-status')
+    this.status = this.dropzoneParams.data('file-init-status')
     const $dropzone = $('div#dropzone')
     const dropzoneUploader = await createDropzone($dropzone[0], {
       url: '/todouploader',
@@ -42,10 +45,10 @@ export default {
       maxFilesize: this.maxFileSize,
       timeout: 0,
       autoQueue: false,
-      dictDefaultMessage: $dropzoneParams.data('default-message'),
-      dictInvalidFileType: $dropzoneParams.data('invalid-input-type'),
-      dictFileTooBig: $dropzoneParams.data('file-too-big'),
-      dictRemoveFile: $dropzoneParams.data('remove-file'),
+      dictDefaultMessage: this.dropzoneParams.data('default-message'),
+      dictInvalidFileType: this.dropzoneParams.data('invalid-input-type'),
+      dictFileTooBig: this.dropzoneParams.data('file-too-big'),
+      dictRemoveFile: this.dropzoneParams.data('remove-file'),
     })
     dropzoneUploader.on("addedfile", (file) => {
       setTimeout(() => {
@@ -54,7 +57,7 @@ export default {
     });
     dropzoneUploader.on("maxfilesexceeded", function(file) {
       if (this.files[0].status !== 'success') {
-        alert('请等待第一个文件传输完成')
+        alert(this.dropzoneParams.data('waitting-uploading'))
         this.removeFile(file)
         return
       }
@@ -101,7 +104,7 @@ export default {
           fileReader   = new FileReader();
       let time = new Date().getTime();
       // console.log('计算MD5...')
-      this.status = '计算MD5';
+      this.status = this.dropzoneParams.data('md5-computing')
       file.totalChunkCounts = chunks;
       loadNext();
 
@@ -118,7 +121,7 @@ export default {
         currentChunk++;
         if (currentChunk < chunks) {
           // console.log(`第${currentChunk}分片解析完成, 开始第${currentChunk +1}/${chunks}分片解析`);
-          this.status = `加载文件 ${(currentChunk/chunks*100).toFixed(2)}% (${currentChunk}/${chunks})`;
+          this.status = `${this.dropzoneParams.data('loading-file')} ${(currentChunk/chunks*100).toFixed(2)}% (${currentChunk}/${chunks})`;
           this.updateProgress(file, (currentChunk/chunks*100).toFixed(2))
           loadNext();
           return
@@ -162,7 +165,7 @@ export default {
         }
         console.log("文件已上传完成");
         this.progress = 100;
-        this.status = '上传完成';
+        this.status = this.dropzoneParams.data('upload-complete')
         this.finishUpload(file)
       } else {
         //断点续传
@@ -306,7 +309,7 @@ export default {
       var urls = new Array();
       var etags = new Array();
       console.log('上传分片...');
-      this.status = '上传中'
+      this.status = this.dropzoneParams.data('uploading')
       loadNext();
       fileReader.onload = async (e) => {
         await uploadChunk(e);
@@ -315,12 +318,13 @@ export default {
           console.log(`第${currentChunk}个分片上传完成, 开始第${currentChunk +1}/${chunks}个分片上传`);
           this.progress = Math.ceil((currentChunk / chunks) * 100);
           this.updateProgress(file, (currentChunk/chunks*100).toFixed(2))
+          this.status = `${this.dropzoneParams.data('uploading')} ${(currentChunk/chunks*100).toFixed(2)}%`
           await loadNext();
         } else {
           await completeUpload();
           console.log(`文件上传完成：${file.name} \n分片：${chunks} 大小:${file.size} 用时：${(new Date().getTime() - time)/1000} s`);
           this.progress = 100;
-          this.status = '上传完成';
+          this.status = this.dropzoneParams.data('upload-complete')
           this.finishUpload(file)
         }
       };