From 980b3217f8d4d48beb264cd345f1c325555a35ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Sat, 9 Jan 2021 15:31:01 +0100
Subject: [PATCH] getFilesFromDataTansfer - with directory upload.

---
 src/component/overlay.vue          |  7 +++---
 src/component/utils/file-upload.ts | 37 ++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 src/component/utils/file-upload.ts

diff --git a/src/component/overlay.vue b/src/component/overlay.vue
index 5080d476..f1bfae69 100644
--- a/src/component/overlay.vue
+++ b/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]
-        if (!files) return
+        const files = await getFilesFromDataTansfer(dt)
+        if (files.length === 0) return
 
         this.$emit('drop-files', { ...this.getMousePos(e.clientX, e.clientY), files })
       }
diff --git a/src/component/utils/file-upload.ts b/src/component/utils/file-upload.ts
new file mode 100644
index 00000000..014cf2a3
--- /dev/null
+++ b/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
+}