From d10b4ecb99e63070a4fcaecf2862d974b0315bc4 Mon Sep 17 00:00:00 2001
From: Everett Bogue <ev@evbogue.com>
Date: Wed, 24 Sep 2025 16:41:03 -0500
Subject: [PATCH] make a first jab at photo uploads

---
 composer.js |  4 +++-
 markdown.js | 25 +++++++++++---------
 upload.js   | 68 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 85 insertions(+), 12 deletions(-)
 create mode 100644 upload.js

diff --git a/composer.js b/composer.js
index 0d3bbf3..c85d42f 100644
--- a/composer.js
+++ b/composer.js
@@ -5,6 +5,7 @@ import { avatarSpan, nameSpan } from './profile.js'
 import { ntfy } from './ntfy.js' 
 import { send } from './send.js'
 import { markdown } from './markdown.js'
+import { imgUpload } from './upload.js'
 
 export const composer = async (sig) => {
   const obj = {}
@@ -93,7 +94,8 @@ export const composer = async (sig) => {
     await nameSpan(),
     replyDiv,
     textareaDiv,
-    previewDiv
+    previewDiv,
+    await imgUpload(textarea)
   ])
 
   const div = h('div', {classList: 'message'}, [
diff --git a/markdown.js b/markdown.js
index cbc696a..0f87b41 100644
--- a/markdown.js
+++ b/markdown.js
@@ -1,6 +1,7 @@
 import { h } from 'h'
 import { apds } from 'apds'
 import { marked } from 'https://esm.sh/gh/evbogue/bog5@de70376265/lib/marked.esm.js'
+import { send } from './send.js'
 
 const renderer = new marked.Renderer()
 
@@ -41,17 +42,19 @@ renderer.link = function (href, title, text) {
   }
 }
 
-// this does not work
-//renderer.image = async function (src, unknown, title) {
-//  if (src.length === 44) {
-//    const file = await apds.find(src)
-//    if (file) {
-//      const div = document.getElementById(src)
-//      div.src = file
-//    } 
-//    return '<div><img id="' + src + '" title="' + title + '" class="thumb" /></div>'
-//  }
-//}
+renderer.image = function (src, unknown, title) {
+  if (src.length === 44) {
+    apds.get(src).then(async (img) => {
+      if (img) {
+        const image = document.getElementById('image'+src)
+        image.src = img
+      } else {
+        send(src)
+      }
+    })
+    return `<img id="image${src}" />`
+  }
+}
 
 marked.setOptions({
   renderer: renderer
diff --git a/upload.js b/upload.js
new file mode 100644
index 0000000..abb26ce
--- /dev/null
+++ b/upload.js
@@ -0,0 +1,68 @@
+import { apds } from 'apds'
+import { h } from 'h'
+
+export const imgUpload = async (textarea) => {
+  const uploadButton = h('button', {
+    classList: 'material-symbols-outlined',
+    onclick: () => { uploader.click() }
+  }, ['image_arrow_up'])
+  
+  const uploader = h('input', { type: 'file', style: 'display: none;'})
+  
+  uploader.addEventListener('change', (e) => {
+    const file = e.target.files[0]
+    const reader = new FileReader()
+  
+    reader.onload = (e) => {
+      const canvas = document.createElement("canvas")
+      const ctx = canvas.getContext("2d")
+      const img = new Image()
+  
+      img.onload = async () => {
+        //const size = 256
+        //if (img.width > size || img.height > size) {
+        //  const width = img.width
+        //  const height = img.height
+        //  let cropWidth
+        //  let cropHeight
+        //  if (width > height) {
+        //    cropWidth = size
+        //    cropHeight = cropWidth * (height / width)
+        //  } else {
+        //    cropHeight = size
+        //    cropWidth = cropHeight * (width / height)
+        //  }
+  
+        //  canvas.width = cropWidth
+        //  canvas.height = cropHeight
+        //  ctx.drawImage(img, 0, 0, width, height, 0, 0, cropWidth, cropHeight)
+        //  const croppedImage = canvas.toDataURL()
+        //  avatarImg.src = croppedImage
+        //  const hash = await apds.make(croppedImage)
+        //  await apds.put('image', hash)
+        //} else {
+          const croppedImage = canvas.toDataURL()
+          const hash = await apds.make(img.src)
+          const mdimg = `![](${hash})`
+          console.log(await apds.get(hash))
+          if (textarea.value) {
+            textarea.value = textarea.value + '\n' + mdimg
+          } else {
+            textarea.value = mdimg
+          }
+        //  await apds.put('image', hash)
+        //}
+      }
+      img.src = e.target.result
+    }
+    reader.readAsDataURL(file)
+  })
+
+
+
+  return h('div', [
+    uploadButton,
+    uploader 
+  ])
+}
+
-- 
knotmirror 0.0.1