improve support for trzsz (#1084)

* trzsz support drag and drop to upload

* optimize trzsz upload speed

* trzsz support windows

* trzsz support transfer directories in browser

html/src/components/app.tsx

@@ -15,6 +15,7 @@ const clientOptions = {
     enableZmodem: false,
     enableTrzsz: false,
     enableSixel: false,
+    isWindows: false,
 } as ClientOptions;
 const termOptions = {
     fontSize: 13,

html/src/components/terminal/xterm/addons/zmodem.ts

@@ -7,6 +7,7 @@ import { TrzszFilter } from 'trzsz';
 export interface ZmodeOptions {
     zmodem: boolean;
     trzsz: boolean;
+    windows: boolean;
     onSend: () => void;
     sender: (data: string | Uint8Array) => void;
     writer: (data: string | Uint8Array) => void;
@@ -54,6 +55,11 @@ export class ZmodemAddon implements ITerminalAddon {
         this.terminal.focus();
     }
 
+    private addDisposableListener(target: EventTarget, type: string, listener: EventListener) {
+        target.addEventListener(type, listener);
+        this.disposables.push({ dispose: () => target.removeEventListener(type, listener) });
+    }
+
     @bind
     private trzszInit() {
         const { terminal } = this;
@@ -68,6 +74,16 @@ export class ZmodemAddon implements ITerminalAddon {
             },
             sendToServer: data => sender(data),
             terminalColumns: terminal.cols,
+            isWindowsShell: this.options.windows,
+        });
+        const element = terminal.element as EventTarget;
+        this.addDisposableListener(element, 'dragover', event => event.preventDefault());
+        this.addDisposableListener(element, 'drop', event => {
+            event.preventDefault();
+            this.trzszFilter
+                .uploadFiles((event as DragEvent).dataTransfer?.items as DataTransferItemList)
+                .then(() => console.log('[ttyd] upload success'))
+                .catch(err => console.log('[ttyd] upload failed: ' + err));
         });
         this.disposables.push(terminal.onResize(size => this.trzszFilter.setTerminalColumns(size.cols)));
     }

html/src/components/terminal/xterm/index.ts

@@ -44,6 +44,7 @@ export interface ClientOptions {
     enableTrzsz: boolean;
     enableSixel: boolean;
     titleFixed?: string;
+    isWindows: boolean;
 }
 
 export interface FlowControl {
@@ -218,7 +219,10 @@ export class Xterm {
         if (socket?.readyState !== WebSocket.OPEN) return;
 
         if (typeof data === 'string') {
-            socket.send(textEncoder.encode(Command.INPUT + data));
+            const payload = new Uint8Array(data.length * 3 + 1);
+            payload[0] = Command.INPUT.charCodeAt(0);
+            const stats = textEncoder.encodeInto(data, payload.subarray(1));
+            socket.send(payload.subarray(0, (stats.written as number) + 1));
         } else {
             const payload = new Uint8Array(data.length + 1);
             payload[0] = Command.INPUT.charCodeAt(0);
@@ -320,6 +324,7 @@ export class Xterm {
             this.zmodemAddon = new ZmodemAddon({
                 zmodem: prefs.enableZmodem,
                 trzsz: prefs.enableTrzsz,
+                windows: prefs.isWindows,
                 onSend: this.sendCb,
                 sender: this.sendData,
                 writer: this.writeData,
@@ -370,6 +375,9 @@ export class Xterm {
                     this.titleFixed = value;
                     document.title = value;
                     break;
+                case 'isWindows':
+                    if (value) console.log('[ttyd] is windows');
+                    break;
                 default:
                     console.log(`[ttyd] option: ${key}=${JSON.stringify(value)}`);
                     if (terminal.options[key] instanceof Object) {