From 1bf4f4cbcd3e82c6558a07accc6ca22033e7111a Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Tue, 20 Jan 2026 17:04:31 +0100
Subject: [PATCH] debug: add client-side logging for recipe image upload

Add console logging in the browser to track image selection and form
submission:
- Log when user selects an image file in CardAdd component
- Log file validation steps (MIME type, size)
- Log form submission and FormData preparation
- Log whether image is being appended to form

This helps diagnose if the issue is client-side (image not selected/sent)
or server-side (image not received/processed).
---
 src/lib/components/CardAdd.svelte               | 17 ++++++++++++++++-
 .../[recipeLang=recipeLang]/add/+page.svelte    | 12 ++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/CardAdd.svelte b/src/lib/components/CardAdd.svelte
index 569813b..a9b8e46 100644
--- a/src/lib/components/CardAdd.svelte
+++ b/src/lib/components/CardAdd.svelte
@@ -60,7 +60,16 @@ let upload_error = $state("");
  */
 export async function show_local_image(){
 	const file = this.files[0];
-	if (!file) return;
+	if (!file) {
+		console.log('[CardAdd] No file selected');
+		return;
+	}
+
+	console.log('[CardAdd] File selected:', {
+		name: file.name,
+		size: file.size,
+		type: file.type
+	});
 
 	// Client-side validation
 	const allowed_mime_types = ['image/webp', 'image/jpeg', 'image/jpg', 'image/png'];
@@ -69,24 +78,30 @@ export async function show_local_image(){
 	// Validate MIME type
 	if(!allowed_mime_types.includes(file.type)) {
 		upload_error = 'Invalid file type. Please upload a JPEG, PNG, or WebP image.';
+		console.error('[CardAdd] Invalid MIME type:', file.type);
 		alert(upload_error);
 		return;
 	}
+	console.log('[CardAdd] MIME type valid:', file.type);
 
 	// Validate file size
 	if(file.size > max_size) {
 		upload_error = `File too large. Maximum size is 5MB. Your file is ${(file.size / 1024 / 1024).toFixed(2)}MB.`;
+		console.error('[CardAdd] File too large:', file.size);
 		alert(upload_error);
 		return;
 	}
+	console.log('[CardAdd] File size valid:', file.size, 'bytes');
 
 	// Show preview and store file for later upload
 	image_preview_url = URL.createObjectURL(file);
 	selected_image_file = file;
 	upload_error = "";
+	console.log('[CardAdd] Image preview created and file stored for upload');
 }
 
 export function remove_selected_images(){
+	console.log('[CardAdd] Removing selected image');
 	image_preview_url = "";
 	selected_image_file = null;
 	upload_error = "";
diff --git a/src/routes/[recipeLang=recipeLang]/add/+page.svelte b/src/routes/[recipeLang=recipeLang]/add/+page.svelte
index 11a43f8..1fca7cb 100644
--- a/src/routes/[recipeLang=recipeLang]/add/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/add/+page.svelte
@@ -294,12 +294,24 @@ button.action_button {
 	enctype="multipart/form-data"
 	use:enhance={() => {
 		submitting = true;
+		console.log('[RecipeAdd:Client] Form submission started');
+		console.log('[RecipeAdd:Client] Selected image file:', {
+			hasFile: !!selected_image_file,
+			fileName: selected_image_file?.name,
+			fileSize: selected_image_file?.size,
+			fileType: selected_image_file?.type
+		});
 		return async ({ update, formData }) => {
 			// Append the image file if one was selected
 			if (selected_image_file) {
+				console.log('[RecipeAdd:Client] Appending image to FormData');
 				formData.append('recipe_image', selected_image_file);
+			} else {
+				console.log('[RecipeAdd:Client] No image to append');
 			}
+			console.log('[RecipeAdd:Client] Sending form to server...');
 			await update();
+			console.log('[RecipeAdd:Client] Form submission complete');
 			submitting = false;
 		};
 	}}