feat: Allow multiple files upload from upload button.

This is disabled for "upload & print" button.
fluidd-core · Jan 4, 2021 · 15695d1 · 15695d1
1 parent 791767d
commit 15695d1
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 26 deletions.
diff --git a/src/components/cards/FileSystemCard.vue b/src/components/cards/FileSystemCard.vue
@@ -189,33 +189,42 @@ export default class FileSystemCard extends Mixins(UtilsMixin) {
       })
   }
 
-  async upload (file: File, root: string, path: string, andPrint: boolean) {
+  ensureFileArray (files: FileList | File): Array<File> {
+    if (files instanceof File) {
+      return [files]
+    }
+    return Array.from(files)
+  }
+
+  async upload (files: FileList | File, andPrint: boolean) {
+    const fileList = this.ensureFileArray(files)
+
     this.$store.dispatch('wait/addWait', Waits.onUploadGcode)
-    await this.doUpload(file, root, path, andPrint)
+    await this.uploadFiles(fileList, this.currentRoot, this.trimmedPath, andPrint)
     this.$store.dispatch('wait/removeWait', Waits.onUploadGcode)
   }
 
   async dropUpload (e: DragEvent) {
     if (e && e.dataTransfer && e.dataTransfer.files.length && !this.readOnly) {
-      this.$store.dispatch('wait/addWait', Waits.onUploadGcode)
-
-      const files = e.dataTransfer.files
-      // Async uploads cause issues in moonraker / klipper.
-      // So instead, upload sequentially.
-      for (const file of files) {
-        try {
-          const extension = '.' + file.name.split('.').pop()
-          const accepts = this.accept.split(',')
-          if (extension && accepts.includes(extension)) {
-            await this.doUpload(file, this.currentRoot, this.trimmedPath, false)
-          } else {
-            EventBus.$emit('flashMessage', { type: 'warning', text: `Error uploading ${file.name}, invalid extension.` })
-          }
-        } catch (e) {
-          EventBus.$emit('flashMessage', { type: 'error', text: `Error uploading ${file.name}<br />${e}` })
+      this.upload(e.dataTransfer.files, false)
+    }
+  }
+
+  async uploadFiles (files: Array<File>, root: string, path: string, andPrint: boolean) {
+    // Async uploads cause issues in moonraker / klipper.
+    // So instead, upload sequentially.
+    for (const file of files) {
+      try {
+        const extension = '.' + file.name.split('.').pop()
+        const accepts = this.accept.split(',')
+        if (extension && accepts.includes(extension)) {
+          await this.doUpload(file, root, path, andPrint)
+        } else {
+          EventBus.$emit('flashMessage', { type: 'warning', text: `Error uploading ${file.name}, invalid extension.` })
         }
+      } catch (e) {
+        EventBus.$emit('flashMessage', { type: 'error', text: `Error uploading ${file.name}<br />${e}` })
       }
-      this.$store.dispatch('wait/removeWait', Waits.onUploadGcode)
     }
   }
 

diff --git a/src/components/widgets/filesystem/FileSystemBrowser.vue b/src/components/widgets/filesystem/FileSystemBrowser.vue
@@ -505,7 +505,7 @@ export default class FileSystemBrowser extends Mixins(UtilsMixin) {
 
   createFile (name: string) {
     const file = new File([`# ${name}\n`], name)
-    this.$emit('upload-file', file, this.currentRoot, this.trimmedPath)
+    this.$emit('upload-file', file, false)
   }
 
   removeItem (item: AppFile | AppDirectory) {
@@ -518,7 +518,7 @@ export default class FileSystemBrowser extends Mixins(UtilsMixin) {
   }
 
   uploadFile (file: File, andPrint: boolean) {
-    this.$emit('upload-file', file, this.currentRoot, this.trimmedPath, andPrint)
+    this.$emit('upload-file', file, andPrint)
   }
 
   downloadFile (file: string) {

diff --git a/src/components/widgets/filesystem/FileSystemControls.vue b/src/components/widgets/filesystem/FileSystemControls.vue
@@ -41,7 +41,7 @@
             v-bind="attrs"
             v-on="on"
             :loading="uploadLoading"
-            @click="andPrint = false; $refs.uploadFile.click()">
+            @click="emulateClick(false)">
             <v-icon small>$fileUpload</v-icon>
           </v-btn>
         </template>
@@ -58,7 +58,7 @@
             v-bind="attrs"
             v-on="on"
             :loading="uploadLoading"
-            @click="andPrint = true; $refs.uploadFile.click()">
+            @click="emulateClick(true)">
             <v-icon small>$progressUpload</v-icon>
           </v-btn>
         </template>
@@ -132,13 +132,20 @@ export default class FileSystemControls extends Vue {
 
   andPrint = false
 
+  emulateClick (startPrint: boolean) {
+    this.andPrint = startPrint
+    const uploadFile = this.$refs.uploadFile as HTMLInputElement
+    uploadFile.multiple = !startPrint // Can't start print with multiple files
+    uploadFile.click()
+  }
+
   fileChanged (e: Event) {
     const target = e.target as HTMLInputElement
     const files = target.files
+
     if (target && files && files.length > 0) {
-      this.$emit('upload', files[0], this.andPrint)
-      const uploadFile = this.$refs.uploadFile as HTMLInputElement
-      uploadFile.value = ''
+      this.$emit('upload', files, this.andPrint)
+      target.value = ''
     }
   }
 }