From 143ec73da5a7ea90e620bfb1de678590e9c83e35 Mon Sep 17 00:00:00 2001
From: June <self@breadone.net>
Date: Tue, 3 Feb 2026 20:00:26 +1300
Subject: [PATCH] first image and entry upload working hell yeah

---
 src/lib/components/addEntryCover.svelte |  2 +-
 src/lib/components/editor/index.svelte  | 31 +++++++++++++-----
 src/lib/upload.ts                       | 42 +++++++++++++++++++++++++
 src/routes/+page.svelte                 |  2 ++
 4 files changed, 69 insertions(+), 8 deletions(-)
 create mode 100644 src/lib/upload.ts

diff --git a/src/lib/components/addEntryCover.svelte b/src/lib/components/addEntryCover.svelte
index 65b18a0..594b84b 100644
--- a/src/lib/components/addEntryCover.svelte
+++ b/src/lib/components/addEntryCover.svelte
@@ -7,7 +7,7 @@
 </script>
 
 {#if edit}
-    <Editor newEntryDate={date} edit={true}/>
+    <Editor newEntryDate={date} bind:edit />
 {:else}
     <div class="flex flex-col items-center justify-center">
         <button
diff --git a/src/lib/components/editor/index.svelte b/src/lib/components/editor/index.svelte
index 3b6cf65..5c617c3 100644
--- a/src/lib/components/editor/index.svelte
+++ b/src/lib/components/editor/index.svelte
@@ -2,22 +2,39 @@
     import ImageTarget from "./imageTarget.svelte";
     import TextEditor from "./textEditor.svelte";
     import { formatDate } from "$lib/date.ts";
+    import { createEntry } from "$lib/upload.ts";
 
     let { newEntryDate, entry = $bindable(), edit = $bindable(false) } = $props();
     
     let newEntry = $state({ date: newEntryDate, image: "", content: "" });
 
-    let editModeText = $derived(edit ? "done" : "edit")
 </script>
 
 <div class="flex flex-row mb-2">
     <p class="text-3xl font-bold">{entry ? formatDate(entry.date) : formatDate(newEntryDate)}</p>
-    <button
-        class="bg-white/20 px-3 rounded-lg ml-auto"
-        onclick={() => edit = !edit}
-    >
-        {editModeText}
-    </button>
+    
+    {#if edit}
+        <button
+            class="bg-white/10 px-3 rounded-lg ml-auto"
+            onclick={() => edit = false}
+        >
+            cancel
+        </button>
+        <button
+            class="bg-white/20 px-3 rounded-lg ml-1"
+            onclick={() => { createEntry(newEntry); edit = false }}
+        >
+            done
+        </button>
+    {:else}
+        <button
+            class="bg-white/20 px-3 rounded-lg ml-auto"
+            onclick={() => edit = true}
+        >
+            edit
+        </button>
+    {/if}
+    
 </div>
 
 {#if entry}
diff --git a/src/lib/upload.ts b/src/lib/upload.ts
new file mode 100644
index 0000000..5904574
--- /dev/null
+++ b/src/lib/upload.ts
@@ -0,0 +1,42 @@
+function dataURLtoFile(dataurl: string, filename: string) {
+    var arr = dataurl.split(','),
+        mime = arr[0].match(/:(.*?);/)[1],
+        bstr = atob(arr[arr.length - 1]), 
+        n = bstr.length, 
+        u8arr = new Uint8Array(n);
+    while(n--){
+        u8arr[n] = bstr.charCodeAt(n);
+    }
+    return new File([u8arr], filename, {type:mime});
+}
+
+export async function uploadImage(b64: string) {
+    const data = new FormData()
+
+    // unable to tell from the b64 whether it's a jpg or png but defaulting to jpg seems to work fine enough
+    const file = dataURLtoFile(b64, 'image.jpg') 
+    data.append('image', file)
+
+    const r = await fetch('/api/image', {
+        method: 'POST',
+        body: data
+    })
+
+    const url = (await r.json()).url
+    return url
+}
+
+export async function createEntry(newEntry) {
+  if (newEntry.image) {
+    const url = await uploadImage(newEntry.image)
+    newEntry.image = url
+  }
+  
+  await fetch("/api/entry/new", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(newEntry),
+  });
+}
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3656ea5..f0aae93 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -24,6 +24,8 @@
         selectedDate = data as string
       }
     }
+    
+    // $effect(() => {selectedEntry = ''})
 </script>
 
 <Calendar entries={data.all} dayClickCallback={selectEntry} />