add file transfer

src/cod/App.svelte

@@ -6,6 +6,7 @@
   import prismIcon from '../assets/prism-launcher.svg';
   import type { SpawnSession } from './spawn';
   import TerminalWindow from './TerminalWindow.svelte';
+  import DropFile from '../vendor/DropFile.svelte';
   import {
     type TerminalLine,
     type TerminalWindow as TerminalWindowModel,
@@ -1441,70 +1442,102 @@ PY`,
   const sendTerminalInput = (id: string, input: string) => {
     session?.input(id, input);
   };
-</script>
 
-<div class="screen" {@attach attachVnc}></div>
+  const onDrop = async (files: File[]) => {
+    let transferFiles: Record<string,string> = {};
+    let script = '', n = 0;
+    for(const file of files){
+      const buf = new Uint8Array(await file.arrayBuffer());
+      let str: string = 'toBase64' in buf ? buf.toBase64() : btoa(String.fromCharCode(...buf));
+      while(str){
+        if(JSON.stringify(transferFiles).length >= 900_000){
+          await session.transfer(transferFiles);
+          transferFiles = {};
+          n++;
+        }
+        transferFiles[`${file.name}._${n}`] = str.slice(0,100_000);
+        str = str.slice(100_000);
+        if(str){
+          await session.transfer(transferFiles);
+          transferFiles = {};
+          n++;
+        }
+      }
+      script = `${script};cat ${file.name}._* | base64 -d > ${file.name};rm ${file.name}._*`
+    }
+    await session.transfer(transferFiles);
+    await startTaskTerminal({
+      id: `decode-files-${Date.now()}`,
+      title: 'Decode files',
+      command: script
+    })
+  }
+</script>
 
-{#if showRelativeMouseHint || relativeMouseEnabled}
-  <div class:active={relativeMouseEnabled} class="mouse-lock-hint">
-    {relativeMouseEnabled
-      ? 'Relative mouse active. Press Esc to release.'
-      : 'Game detected. Ctrl+click the desktop for relative mouse.'}
-  </div>
-{/if}
-
-<TerminalWindow
-  {terminals}
-  open={terminalOpen}
-  activeTab={activeTerminalTab}
-  onClose={closeTerminalApp}
-  onSelectTab={selectTerminalTab}
-  onToggleTask={toggleTask}
-  onNewTerminal={launchTerminal}
-  onInput={sendTerminalInput}
-/>
-
-<div class:force-expand={loading} class="bar-anchor">
-  <nav class="bar" aria-label="Open windows">
-    {#each remoteWindows as window (window.id)}
-      <button
-        class="app-entry alive m3-layer"
-        type="button"
-        title={window.title}
-        onclick={() => focusRemoteWindow(window)}
-      >
-        <span>{window.title}</span>
-      </button>
-    {/each}
-    <button
-      class="app-entry m3-layer"
-      class:alive={terminalOpen || terminals.length > 0}
-      type="button"
-      title="Terminal"
-      onclick={() => openTerminalApp()}
-    >
-      <span>Terminal</span>
-    </button>
-    {#each launcherApps as app (app.id)}
-      {#if app.isInstalled() && !app.isRunning()}
+<DropFile onDrop={onDrop}>
+  <div class="screen" {@attach attachVnc}></div>
+
+  {#if showRelativeMouseHint || relativeMouseEnabled}
+    <div class:active={relativeMouseEnabled} class="mouse-lock-hint">
+      {relativeMouseEnabled
+        ? 'Relative mouse active. Press Esc to release.'
+        : 'Game detected. Ctrl+click the desktop for relative mouse.'}
+    </div>
+  {/if}
+
+  <TerminalWindow
+    {terminals}
+    open={terminalOpen}
+    activeTab={activeTerminalTab}
+    onClose={closeTerminalApp}
+    onSelectTab={selectTerminalTab}
+    onToggleTask={toggleTask}
+    onNewTerminal={launchTerminal}
+    onInput={sendTerminalInput}
+  />
+
+  <div class:force-expand={loading} class="bar-anchor">
+    <nav class="bar" aria-label="Open windows">
+      {#each remoteWindows as window (window.id)}
         <button
-          class="app-entry launcher m3-layer"
+          class="app-entry alive m3-layer"
           type="button"
-          title={`Launch ${app.name}`}
-          aria-label={`Launch ${app.name}`}
-          onclick={app.launch}
+          title={window.title}
+          onclick={() => focusRemoteWindow(window)}
         >
-          {@html app.icon}
-          <span>{app.name}</span>
+          <span>{window.title}</span>
         </button>
-      {/if}
-    {/each}
-  </nav>
-</div>
-
-<div class:hidden={!loading} class="loader">
-  <img src={cod} alt="Loading Cod" />
-</div>
+      {/each}
+      <button
+        class="app-entry m3-layer"
+        class:alive={terminalOpen || terminals.length > 0}
+        type="button"
+        title="Terminal"
+        onclick={() => openTerminalApp()}
+      >
+        <span>Terminal</span>
+      </button>
+      {#each launcherApps as app (app.id)}
+        {#if app.isInstalled() && !app.isRunning()}
+          <button
+            class="app-entry launcher m3-layer"
+            type="button"
+            title={`Launch ${app.name}`}
+            aria-label={`Launch ${app.name}`}
+            onclick={app.launch}
+          >
+            {@html app.icon}
+            <span>{app.name}</span>
+          </button>
+        {/if}
+      {/each}
+    </nav>
+  </div>
+
+  <div class:hidden={!loading} class="loader">
+    <img src={cod} alt="Loading Cod" />
+  </div>
+</DropFile>
 
 <style>
   .screen {

src/vendor/DropFile.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  const { children, multiple, disabled, onDrop, onEnter, onLeave } = $props();
+
+  let isOver: boolean = false;
+  let input: HTMLInputElement;
+
+  const handleEnter = () => {
+    isOver = true;
+    if (onEnter) {
+      onEnter();
+    }
+  };
+
+  const handleLeave = () => {
+    isOver = false;
+    if (onLeave) {
+      onLeave();
+    }
+  };
+
+  const handleDrop = (e: DragEvent) => {
+    e.preventDefault();
+
+    if (!e?.dataTransfer?.items || disabled) {
+      return;
+    }
+    const items = Array.from(e.dataTransfer.files);
+    onDrop(items);
+    isOver = false;
+  };
+
+  const handleDragOver = (e: Event) => {
+    e.preventDefault();
+  };
+
+  const handleChange = (e: Event) => {
+    e.preventDefault();
+    const files: FileList = <FileList>(<HTMLInputElement>e.target).files;
+    onDrop(Array.from(files));
+  };
+
+  const onClick = () => {
+    input.click();
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      input.click();
+    }
+  };
+</script>
+
+<div
+  id="zone"
+  ondrop={handleDrop}
+  ondragover={handleDragOver}
+  ondragenter={handleEnter}
+  ondragleave={handleLeave}
+  onclick={onClick}
+  onkeydown={onKeyDown}
+  tabIndex={0}
+>
+  {@render children()}
+</div>
+<input
+  id="hidden-input"
+  type="file"
+  onchange={handleChange}
+  bind:this={input}
+  {multiple}
+  {disabled}
+/>
+
+<style>
+  #zone {
+    width: 100%;
+    height: 100%;
+  }
+  #hidden-input {
+    display: none;
+  }
+</style>