Fixed Issue #15766: Upload multiple files - error message

LimeSurvey · Feb 3, 2020 · d93e0f6 · d93e0f6
1 parent f37e73c
commit d93e0f6
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 44 deletions.
diff --git a/assets/packages/filemanager/src/App.vue b/assets/packages/filemanager/src/App.vue
@@ -30,7 +30,7 @@ export default {
         FileList
     },
     props: {
-        presetFolder: {type: String|null, default: null}
+        presetFolder: {type: String, default: ''}
     },
     data() {
         return {
@@ -44,14 +44,12 @@ export default {
             this.loading = nV;
         },
         triggerForceRedraw() {
-            // this.loading=true;
             this.$forceUpdate();
-            // window.setTimeout(()=>{this.loading=false}, 250);
         }
     },
     mounted() {
-        this.$store.dispatch("getFolderList").then(result => {
-            
+        this.$store.dispatch("getFolderList").then( () => {
+
             if(this.presetFolder != null) {
                 this.$store.commit(
                     "setCurrentFolder",
@@ -69,7 +67,7 @@ export default {
             .catch(error => {
                 window.LS.notifyFader(
                     `${this.translate("An error has occured and the file list could not be loaded:")}
-Error: 
+Error:
 ${error.data.message}`,
                     'well-lg bg-danger text-center'
                 );
@@ -84,7 +82,7 @@ ${error.data.message}`,
             this.hasError = true;
             window.LS.notifyFader(
                 `${this.translate("An error has occured and the folders could not be loaded:")}
-Error: 
+Error:
 ${error.data.message}`,
                 'well-lg bg-danger text-center'
             );

diff --git a/assets/packages/filemanager/src/components/NavBar.vue b/assets/packages/filemanager/src/components/NavBar.vue
@@ -1,3 +1,18 @@
+<template>
+  <div class="navbar navbar-default scoped-navbar-fixes">
+    <div class="container-fluid">
+      <div class="navbar-header">
+        <span class="navbar-brand">{{$store.state.currentFolder}}</span>
+      </div>
+      <ul class="nav navbar-nav navbar-right">
+        <li id="FileManager--button-fileInTransit--cancel" v-if="fileInTransit"><a href="#" @click.prevent="cancelTransit">{{'Cancel '+transitType | translate}}</a></li>
+        <li id="FileManager--button-fileInTransit--submit" v-if="fileInTransit"><a href="#" @click.prevent="runTransit">{{ transitType | translate }}</a></li>
+        <li id="FileManager--button-download"><a href="#" @click.prevent="downloadFiles">{{ 'Download' | translate }}</a></li>
+        <li><a id="FileManager--button-upload" href="#" @click.prevent="openUploadModal">{{'Upload'|translate}}</a></li>
+      </ul>
+    </div>
+  </div>
+</template>
 <script>
 import UploadModal from './subcomponents/_uploadModal';
 import applyLoader from '../mixins/applyLoader';
@@ -45,7 +60,7 @@ export default {
         this.$log.error(e);
         window.LS.notifyFader(
                     `${this.translate("An error has occured and the selected files ycould not be downloaded.")}
-Error: 
+Error:
 ${error.data.message}`,
                     'well-lg bg-danger text-center'
         );
@@ -72,23 +87,6 @@ ${error.data.message}`,
   }
 }
 </script>
-
-<template>
-  <div class="navbar navbar-default scoped-navbar-fixes">
-    <div class="container-fluid">
-      <div class="navbar-header">
-        <span class="navbar-brand">{{$store.state.currentFolder}}</span>
-      </div>
-      <ul class="nav navbar-nav navbar-right">
-        <li id="FileManager--button-fileInTransit--cancel" v-if="fileInTransit"><a href="#" @click.prevent="cancelTransit">{{'Cancel '+transitType | translate}}</a></li>
-        <li id="FileManager--button-fileInTransit--submit" v-if="fileInTransit"><a href="#" @click.prevent="runTransit">{{ transitType | translate }}</a></li>
-        <li id="FileManager--button-download"><a href="#" @click.prevent="downloadFiles">{{ 'Download' | translate }}</a></li>
-        <li><a id="FileManager--button-upload" href="#" @click.prevent="openUploadModal">{{'Upload'|translate}}</a></li>
-      </ul>
-    </div>
-  </div>
-</template>
-
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
   .scoped-navbar-fixes {
@@ -97,7 +95,7 @@ ${error.data.message}`,
             background: linear-gradient(to right, transparent 50.03%,  #989898 50%);
             background: linear-gradient(to right, transparent 50.03%,  var(--LS-admintheme-hovercolor) 50%);
             background-size: 200%;
-            background-position: 0;    
+            background-position: 0;
             transition: all 0.3s;
             &:hover,
             &:active,

diff --git a/assets/packages/filemanager/src/components/subcomponents/_uploadModal.vue b/assets/packages/filemanager/src/components/subcomponents/_uploadModal.vue
@@ -7,13 +7,14 @@
             <div> {{'File formats' | translate}}. </div>
         </div>
         <div class="panel-body ls-flex-column grow-1 fill">
-            <vue-dropzone 
-                ref="fileUploaderDropzone" 
-                id="FileUploader--dropzone" 
-                v-on:vdropzone-sending="applyFolderAndData" 
+            <vue-dropzone
+                ref="fileUploaderDropzone"
+                id="FileUploader--dropzone"
+                v-on:vdropzone-file-added="fileAdded"
+                v-on:vdropzone-sending="sendFile"
                 v-on:vdropzone-error="onErrorHandler"
                 v-on:vdropzone-complete="onCompleteHandler"
-                :options="dropzoneOptions" 
+                :options="dropzoneOptions"
                 :useCustomSlot="true"
                 :uploadMultiple="true"
                 class="FileUpload--dropzone"
@@ -25,10 +26,9 @@
                 </div>
             </vue-dropzone>
         </div>
-    </div>    
+    </div>
 </template>
 <script>
-
 import vue2Dropzone from 'vue2-dropzone'
 
 export default {
@@ -39,6 +39,9 @@ export default {
     props: {},
     data(){
         return {
+            queue: [],
+            url: '',
+            formData: {},
             dropzoneOptions: {
                 url: window.FileManager.baseUrl+'uploadFile',
                 thumbnailWidth: 200,
@@ -48,14 +51,9 @@ export default {
     },
     methods: {
         fileAdded(file) {
-            
-        },
-        applyFolderAndData(file, xhr, formData){
-            formData.append(LS.data.csrfTokenName, LS.data.csrfToken);
-            formData.append('folder', this.$store.state.currentFolder);
-            const surveyId = LS.reparsedParameters().combined.surveyid;
-            if(surveyId != undefined) {
-                formData.append('surveyid', surveyId);
+            if (file !== null) {
+                this.queue.push(file);
+                console.log('File added: ', file);
             }
         },
         onErrorHandler(error) {
@@ -72,9 +70,42 @@ export default {
                 'well-lg bg-danger text-center'
             );
         },
-        onCompleteHandler(response) {
-            this.$emit('close');
-        }
+        onCompleteHandler() {
+            let queueLength = this.queue.length;
+
+            if (queueLength > 1) {
+                let success = this.sendFiles(this.queue);
+                if (success) {
+                    this.$emit('close');
+                }
+            } else {
+                this.$emit('close');
+            }
+        },
+        sendFile(file, xhr, formData) {
+            let success = false;
+            this.formData = formData;
+            this.url = xhr;
+
+            try {
+                formData.append(LS.data.csrfTokenName, LS.data.csrfToken);
+                formData.append('folder', this.$store.state.currentFolder);
+                const surveyId = LS.reparsedParameters().combined.surveyid;
+                if(surveyId !== undefined) {
+                    formData.append('surveyid', surveyId);
+                }
+            } catch(e) {
+                this.log.error('Error: ', e.message);
+            }
+            return success;
+        },
+        sendFiles(items) {
+            let success = false;
+            for (let item in items) {
+                success = this.sendFile(item, this.url, this.formData);
+            }
+            return success;
+        },
     }
 }
 </script>