uploading works! storing images separately and all

src/pages/index.astro

@@ -4,24 +4,30 @@ import "../styles/global.css"
 
 <script>
 	import Quill from "quill";
+	import { uploadEntry } from '../utils/quill'
+	import type { Entry } from "../utils/quill";
 
 	const quill = new Quill('#editor', {
 		modules: {
 			toolbar: [
 			['bold', 'italic', 'underline'],
-			['image'],
+			['image']
 			],
 		},
 		placeholder: 'Compose an epic...',
 		theme: 'snow', // or 'bubble'
 	});
 
-	document.querySelector("#render")?.addEventListener('click', () => {
+	document.querySelector("#upload")?.addEventListener('click', async () => {
-		const contents = JSON.stringify(quill.getContents())
+		const contents = quill.getContents()
 
-		const el = document.getElementById("result")
+		let entry: Entry = {
+			content: contents,
+			date: '2026-01-13T10:49:43Z',
+			location: null
+		}
 
-		el!.innerText = contents
+		await uploadEntry(entry)
 	})
 
 	
@@ -44,8 +50,8 @@ import "../styles/global.css"
 			<p><br /></p>
 		</div>
 
-		<button id="render" class="mt-2">
+		<button id="upload" class="mt-2">
-			render	
+			upload	
 		</button>
 
 		<div id="result">

src/utils/quill.ts

@@ -1,4 +1,3 @@
-import { db } from "./db";
 import type { Delta } from "quill";
 
 export interface Entry {
@@ -20,19 +19,48 @@ function dataURLtoFile(dataurl: string, filename: string) {
     return new File([u8arr], filename, {type:mime});
 }
 
-
+async function uploadImage(b64: string) {
-async function uploadImages(delta: Delta) {
-    let newDelta = delta
-
-    for (const value in newDelta.ops) {
-        
-    }
-
     const data = new FormData()
-    data.append('image', dataURLtoFile('image.jpg', 'a'))
 
+    // 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 uploadDelta(entry: Entry) {
+async function uploadAllImages(delta: Delta) {
+    let newDelta = delta
 
+    for (const val of newDelta.ops) {
+        if (val.insert?.image != null) {
+            const imgUrl = await uploadImage(val.insert!.image)
+            val.insert!.image = imgUrl
+        }
+    }
+    
+    return newDelta
+}
+
+export async function uploadEntry(entry: Entry) {
+    // first upload all the images seperately 
+    const delta = await uploadAllImages(entry.content)
+
+    const finalEntry: Entry = {
+        date: entry.date,
+        location: entry.location,
+        content: delta
+    }
+
+    const r = await fetch('/api/entry/new', {
+        method: 'POST',
+        headers: {'content-type': 'application/json'},
+        body: JSON.stringify(finalEntry)
+    })
 }