getFilesFromDataTansfer - with directory upload.

src/component/overlay.vue

@@ -33,6 +33,7 @@
   import { Vue, Component, Ref, Prop, Watch } from 'vue-property-decorator'
 
   import GuacamoleKeyboard from './utils/guacamole-keyboard'
+  import { getFilesFromDataTansfer } from './utils/file-upload'
   import { NekoWebRTC } from './internal/webrtc'
 
   @Component({
@@ -206,13 +207,13 @@
       this.onMouseMove(e as MouseEvent)
     }
 
-    onDrop(e: DragEvent) {
+    async onDrop(e: DragEvent) {
       if (this.isControling || this.implicitControl) {
         let dt = e.dataTransfer
         if (!dt) return
 
-        let files = [...dt.files]
+        const files = await getFilesFromDataTansfer(dt)
-        if (!files) return
+        if (files.length === 0) return
 
         this.$emit('drop-files', { ...this.getMousePos(e.clientX, e.clientY), files })
       }

src/component/utils/file-upload.ts

@@ -0,0 +1,37 @@
+export async function getFilesFromDataTansfer(dataTransfer: DataTransfer): Promise<Array<File>> {
+  const files: Array<File> = []
+
+  const traverse = (entry: any): Promise<any> => {
+    return new Promise((resolve) => {
+      if (entry.isFile) {
+        entry.file((file: File) => {
+          files.push(file)
+          resolve(file)
+        })
+      } else if (entry.isDirectory) {
+        const reader = entry.createReader()
+        reader.readEntries((entries: any) => {
+          const promises = entries.map(traverse)
+          Promise.all(promises).then(resolve)
+        })
+      }
+    })
+  }
+
+  const promises: Array<Promise<any>> = []
+  for (const item of dataTransfer.items) {
+    if ('webkitGetAsEntry' in item) {
+      promises.push(traverse(item.webkitGetAsEntry()))
+    } else if ('getAsEntry' in item) {
+      // @ts-ignore
+      promises.push(traverse(item.getAsEntry()))
+    } else break
+  }
+
+  if (promises.length === 0) {
+    return [...dataTransfer.files]
+  }
+
+  await Promise.all(promises)
+  return files
+}