From ae1561ac901cc1b619c3dafbb6a7ea46357a7c2b Mon Sep 17 00:00:00 2001
From: prcrst <138210321+prcrst@users.noreply.github.com>
Date: Wed, 22 Nov 2023 14:33:25 +0000
Subject: [PATCH] Implement editor.uploadFile syscall (#570)

* Implement editor.attachFile syscall

* Refactor attachFile to uploadFile

returns a promise with an UploadFile now

* Fix style

* Reject promise with errors

* Another code style fix

---------

Co-authored-by: prcrst <p-github@prcr.st>
---
 plug-api/silverbullet-syscall/editor.ts |  5 +++
 plug-api/types.ts                       |  5 +++
 web/syscalls/editor.ts                  | 41 +++++++++++++++++++++++++
 3 files changed, 51 insertions(+)

diff --git a/plug-api/silverbullet-syscall/editor.ts b/plug-api/silverbullet-syscall/editor.ts
index 4068c76..1a5251a 100644
--- a/plug-api/silverbullet-syscall/editor.ts
+++ b/plug-api/silverbullet-syscall/editor.ts
@@ -1,4 +1,5 @@
 import type { FilterOption } from "../../web/types.ts";
+import { UploadFile } from "../types.ts";
 import { syscall } from "./syscall.ts";
 
 export function getCurrentPage(): Promise<string> {
@@ -55,6 +56,10 @@ export function downloadFile(filename: string, dataUrl: string): Promise<void> {
   return syscall("editor.downloadFile", filename, dataUrl);
 }
 
+export function uploadFile(accept?: string, capture?: string): Promise<UploadFile> {
+  return syscall("editor.uploadFile", accept, capture);
+}
+
 export function flashNotification(
   message: string,
   type: "info" | "error" = "info",
diff --git a/plug-api/types.ts b/plug-api/types.ts
index 0381fed..6cf8d27 100644
--- a/plug-api/types.ts
+++ b/plug-api/types.ts
@@ -140,3 +140,8 @@ export type LintDiagnostic = {
   severity: "error" | "warning" | "info" | "hint";
   message: string;
 };
+
+export type UploadFile = {
+  name: string;
+  content: Uint8Array;
+}
\ No newline at end of file
diff --git a/web/syscalls/editor.ts b/web/syscalls/editor.ts
index ce414c8..5e2fdec 100644
--- a/web/syscalls/editor.ts
+++ b/web/syscalls/editor.ts
@@ -12,6 +12,7 @@ import {
 } from "../deps.ts";
 import { SysCallMapping } from "../../plugos/system.ts";
 import type { FilterOption } from "../types.ts";
+import { UploadFile } from "../../plug-api/types.ts";
 
 export function editorSyscalls(editor: Client): SysCallMapping {
   const syscalls: SysCallMapping = {
@@ -61,6 +62,46 @@ export function editorSyscalls(editor: Client): SysCallMapping {
       link.download = filename;
       link.click();
     },
+    "editor.uploadFile": (
+      _ctx,
+      accept?: string,
+      capture?: string
+    ): Promise<UploadFile> => {
+      return new Promise<UploadFile>((resolve, reject) => {
+        const input = document.createElement("input");
+        input.type = "file";
+        if (accept) {
+          input.accept = accept;
+        }
+        if (capture) {
+          input.capture = capture;
+        }
+
+        input.onchange = () => {
+          const file = input.files?.item(0);
+          if (!file) {
+            reject(new Error("No file found"));
+          } else {
+            var reader = new FileReader();
+            reader.readAsArrayBuffer(file);
+            reader.onloadend = async (evt) => {
+              if (evt.target?.readyState == FileReader.DONE) {
+                const arrayBuffer = evt.target.result;
+                resolve({
+                  name: file.name,
+                  content: new Uint8Array(await file.arrayBuffer())
+                });
+              }
+            };
+            reader.onabort = (e) => { reject(e) };
+            reader.onerror = (e) => { reject(e) };
+          }
+        }
+        input.onabort = (e) => { reject(e) };
+
+        input.click();
+      });
+    },
     "editor.flashNotification": (
       _ctx,
       message: string,