Use encrypted uploads

src/app/components/ChatCompose.svelte

@@ -20,6 +20,8 @@
 
   export const focus = () => editor.then(ed => ed.chain().focus().run())
 
+  const uploadFiles = () => editor.then(ed => ed.chain().selectFiles().run())
+
   const submit = async () => {
     if ($uploading) return
 
@@ -40,11 +42,21 @@
     submit,
     uploading,
     aggressive: true,
-    disableFileUpload: true,
   })
 </script>
 
 <form class="relative z-feature flex gap-2 p-2" onsubmit={preventDefault(submit)}>
+  <Button
+    data-tip="Add an image"
+    class="center tooltip tooltip-right h-10 w-10 min-w-10 rounded-box bg-base-300 transition-colors hover:bg-base-200"
+    disabled={$uploading}
+    onclick={uploadFiles}>
+    {#if $uploading}
+      <span class="loading loading-spinner loading-xs"></span>
+    {:else}
+      <Icon icon="gallery-send" />
+    {/if}
+  </Button>
   <div class="chat-editor flex-grow overflow-hidden">
     <EditorContent {editor} />
   </div>

src/app/components/ContentLinkBlockImage.svelte

@@ -1,14 +1,39 @@
 <script lang="ts">
+  import {onMount, onDestroy} from "svelte"
   import {getTags, getTagValue, tagsFromIMeta} from "@welshman/util"
+  import {decryptFile} from "@welshman/editor"
   import {imgproxy} from "@app/state"
 
   const {value, event, ...props} = $props()
 
   const url = value.url.toString()
-  const meta = getTags("imeta", event.tags)
-    .map(tagsFromIMeta)
-    .find(meta => getTagValue("url", meta) === url)
-  const src = imgproxy(url)
+  const meta =
+    getTags("imeta", event.tags)
+      .map(tagsFromIMeta)
+      .find(meta => getTagValue("url", meta) === url) || []
+
+  const key = getTagValue("decryption-key", meta)
+  const nonce = getTagValue("decryption-nonce", meta)
+  const encryptionAlgorithm = getTagValue("encryption-algorithm", meta)
+
+  let src = $state(imgproxy(url))
+
+  onMount(async () => {
+    if (encryptionAlgorithm === "aes-gcm" && key && nonce) {
+      const response = await fetch(url)
+
+      if (response.ok) {
+        const ciphertext = new Uint8Array(await response.arrayBuffer())
+        const decryptedData = decryptFile({ciphertext, key, nonce, encryptionAlgorithm})
+
+        src = URL.createObjectURL(new Blob([new Uint8Array(decryptedData)]))
+      }
+    }
+  })
+
+  onDestroy(() => {
+    URL.revokeObjectURL(src)
+  })
 </script>
 
 <img alt="" {src} {...props} />

src/app/editor/index.ts

@@ -35,7 +35,6 @@ export const makeEditor = async ({
   submit,
   uploading,
   wordCount,
-  disableFileUpload,
 }: {
   aggressive?: boolean
   autofocus?: boolean
@@ -46,7 +45,6 @@ export const makeEditor = async ({
   submit: () => void
   uploading?: Writable<boolean>
   wordCount?: Writable<number>
-  disableFileUpload?: boolean
 }) => {
   return new Editor({
     content,
@@ -69,18 +67,17 @@ export const makeEditor = async ({
               aggressive,
             },
           },
-          fileUpload: disableFileUpload
-            ? false
-            : {
-                config: {
-                  onDrop() {
-                    uploading?.set(true)
-                  },
-                  onComplete() {
-                    uploading?.set(false)
-                  },
-                },
+          fileUpload: {
+            config: {
+              encryptionAlgorithm: "aes-gcm",
+              onDrop() {
+                uploading?.set(true)
               },
+              onComplete() {
+                uploading?.set(false)
+              },
+            },
+          },
           nprofile: {
             extend: {
               addNodeView: () => makeMentionNodeView(url),