script to handle upload working

web/src/pages/recipe/new.astro

@@ -18,10 +18,44 @@ tags:
 `
 ---
 
-<script is:inline>
-    document.querySelector('#btn-save')?.addEventListener('onclick', () => {
-        console.log("hi")
-    })
+<script>
+    document.querySelector('#btn-save')!.addEventListener('click', async () => {
+        try {
+            const cooklangTextarea = document.querySelector('#cooklang') as HTMLTextAreaElement;
+            const cooklangContent = cooklangTextarea?.value;
+
+            // Get the file input
+            const photoInput = document.querySelector('#photo') as HTMLInputElement;
+            const photoFile = photoInput?.files?.[0];
+
+            // Create FormData for the upload
+            const formData = new FormData();
+            formData.append('cooklang', cooklangContent);
+            
+            if (photoFile) {
+                formData.append('images', photoFile);
+            }
+
+            // Upload to PocketBase via /api
+            const response = await fetch('/api/collections/recipes/records', {
+                method: 'POST',
+                body: formData
+            });
+
+            if (response.ok) {
+                const result = await response.json();
+                // Redirect to the recipe page
+                window.location.href = `/recipe/${result.id}`;
+            } else {
+                const error = await response.text();
+                console.error('Save failed:', error);
+                alert('Failed to save recipe: ' + error);
+            }
+        } catch (error) {
+            console.error('Error saving recipe:', error);
+            alert('Error saving recipe: ' + error);
+        }
+    });
 </script>
 
 <Base>