Merge pull request #9891 from marko1616/master

Fix Issue #4946 Basic folder upload for sftp electron.

tabby-core/src/api/index.ts

@@ -10,7 +10,7 @@ export { Theme } from './theme'
 export { TabContextMenuItemProvider } from './tabContextMenuProvider'
 export { SelectorOption } from './selector'
 export { CLIHandler, CLIEvent } from './cli'
-export { PlatformService, ClipboardContent, MessageBoxResult, MessageBoxOptions, FileDownload, FileUpload, FileTransfer, HTMLFileUpload, FileUploadOptions } from './platform'
+export { PlatformService, ClipboardContent, MessageBoxResult, MessageBoxOptions, FileDownload, FileUpload, FileTransfer, HTMLFileUpload, FileUploadOptions, DirectoryUpload } from './platform'
 export { MenuItemOptions } from './menu'
 export { BootstrapData, PluginInfo, BOOTSTRAP_DATA } from './mainProcess'
 export { HostWindowService } from './hostWindow'

tabby-core/src/api/platform.ts

@@ -86,6 +86,26 @@ export interface FileUploadOptions {
     multiple: boolean
 }
 
+export class DirectoryUpload {
+    private childrens: (FileUpload|DirectoryUpload)[] = []
+
+    constructor (private name = '') {
+        // Just set name for now.
+    }
+
+    getName (): string {
+        return this.name
+    }
+
+    getChildrens (): (FileUpload|DirectoryUpload)[] {
+        return this.childrens
+    }
+
+    pushChildren (item: FileUpload|DirectoryUpload): void {
+        this.childrens.push(item)
+    }
+}
+
 export type PlatformTheme = 'light'|'dark'
 
 export abstract class PlatformService {
@@ -106,23 +126,54 @@ export abstract class PlatformService {
 
     abstract startDownload (name: string, mode: number, size: number): Promise<FileDownload|null>
     abstract startUpload (options?: FileUploadOptions): Promise<FileUpload[]>
+    abstract startUploadDirectory (paths?: string[]): Promise<DirectoryUpload>
+
+    async startUploadFromDragEvent (event: DragEvent, multiple = false): Promise<DirectoryUpload> {
+        const result = new DirectoryUpload()
 
-    startUploadFromDragEvent (event: DragEvent, multiple = false): FileUpload[] {
-        const result: FileUpload[] = []
         if (!event.dataTransfer) {
-            return []
+            return Promise.resolve(result)
         }
+
+        const traverseFileTree = (item: any, root: DirectoryUpload = result): Promise<void> => {
+            return new Promise((resolve) => {
+                if (item.isFile) {
+                    item.file((file: File) => {
+                        const transfer = new HTMLFileUpload(file)
+                        this.fileTransferStarted.next(transfer)
+                        root.pushChildren(transfer)
+                        resolve()
+                    })
+                } else if (item.isDirectory) {
+                    const dirReader = item.createReader()
+                    const childrenFolder = new DirectoryUpload(item.name)
+                    dirReader.readEntries(async (entries: any[]) => {
+                        for (const entry of entries) {
+                            await traverseFileTree(entry, childrenFolder)
+                        }
+                        resolve()
+                    })
+                    root.pushChildren(childrenFolder)
+                } else {
+                    resolve()
+                }
+            })
+        }
+
+        const promises: Promise<void>[] = []
+
+        const items = event.dataTransfer.items
         // eslint-disable-next-line @typescript-eslint/prefer-for-of
-        for (let i = 0; i < event.dataTransfer.files.length; i++) {
-            const file = event.dataTransfer.files[i]
-            const transfer = new HTMLFileUpload(file)
-            this.fileTransferStarted.next(transfer)
-            result.push(transfer)
-            if (!multiple) {
-                break
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i].webkitGetAsEntry()
+            if (item) {
+                promises.push(traverseFileTree(item))
+                if (!multiple) {
+                    break
+                }
             }
         }
-        return result
+        return Promise.all(promises).then(() => result)
     }
 
     getConfigPath (): string|null {

tabby-core/src/directives/dropZone.directive.ts

@@ -1,5 +1,5 @@
 import { Directive, Output, ElementRef, EventEmitter, AfterViewInit } from '@angular/core'
-import { FileUpload, PlatformService } from '../api/platform'
+import { DirectoryUpload, PlatformService } from '../api/platform'
 import './dropZone.directive.scss'
 
 /** @hidden */
@@ -7,7 +7,7 @@ import './dropZone.directive.scss'
     selector: '[dropZone]',
 })
 export class DropZoneDirective implements AfterViewInit {
-    @Output() transfer = new EventEmitter<FileUpload>()
+    @Output() transfer = new EventEmitter<DirectoryUpload>()
     private dropHint?: HTMLElement
 
     constructor (
@@ -27,11 +27,9 @@ export class DropZoneDirective implements AfterViewInit {
                 })
             }
         })
-        this.el.nativeElement.addEventListener('drop', (event: DragEvent) => {
+        this.el.nativeElement.addEventListener('drop', async (event: DragEvent) => {
             this.removeHint()
-            for (const transfer of this.platform.startUploadFromDragEvent(event, true)) {
-                this.transfer.emit(transfer)
-            }
+            this.transfer.emit(await this.platform.startUploadFromDragEvent(event, true))
         })
         this.el.nativeElement.addEventListener('dragleave', () => {
             this.removeHint()