From a48ae3ff3c1de37fc573f40ab2986bdaee12b675 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Thu, 15 Jan 2026 14:18:50 +0100
Subject: [PATCH] refactor: defer recipe image upload until form submission

Changed recipe image upload behavior to only process images when the
form is submitted, rather than immediately on file selection. This
prevents orphaned image files when users abandon the form.

Changes:
- CardAdd.svelte: Preview only, store File object instead of uploading
- Created imageProcessing.ts: Shared utility for image processing
- Add/edit page clients: Use selected_image_file instead of filename
- Add/edit page servers: Process and save images during form submission
- Images are validated, hashed, and saved in multiple formats on submit

Benefits:
- No orphaned files from abandoned forms
- Faster initial file selection experience
- Server-side image processing ensures security validation
- Cleaner architecture with shared processing logic
---
 src/lib/components/CardAdd.svelte             | 70 +++-------------
 .../add/+page.server.ts                       | 33 ++++++--
 .../[recipeLang=recipeLang]/add/+page.svelte  | 14 ++--
 .../edit/[name]/+page.server.ts               | 39 ++++++---
 .../edit/[name]/+page.svelte                  | 20 +++--
 src/utils/imageProcessing.ts                  | 79 +++++++++++++++++++
 6 files changed, 162 insertions(+), 93 deletions(-)
 create mode 100644 src/utils/imageProcessing.ts

diff --git a/src/lib/components/CardAdd.svelte b/src/lib/components/CardAdd.svelte
index 5a86fa5..569813b 100644
--- a/src/lib/components/CardAdd.svelte
+++ b/src/lib/components/CardAdd.svelte
@@ -8,12 +8,12 @@ import { onMount } from 'svelte'
 let {
 	card_data = $bindable(),
 	image_preview_url = $bindable(),
-	uploaded_image_filename = $bindable(''),
+	selected_image_file = $bindable(null),
 	short_name = ''
 } = $props<{
 	card_data: any,
 	image_preview_url: string,
-	uploaded_image_filename?: string,
+	selected_image_file?: File | null,
 	short_name: string
 }>();
 
@@ -52,12 +52,11 @@ if(!card_data.tags){
 
 //locals
 let new_tag = $state("");
-let uploading = $state(false);
 let upload_error = $state("");
 
 /**
- * Handles image file selection and upload
- * Now uses FormData instead of base64 encoding for better security and performance
+ * Handles image file selection and preview
+ * The actual upload will happen when the form is submitted
  */
 export async function show_local_image(){
 	const file = this.files[0];
@@ -81,57 +80,15 @@ export async function show_local_image(){
 		return;
 	}
 
-	// Show preview immediately
+	// Show preview and store file for later upload
 	image_preview_url = URL.createObjectURL(file);
+	selected_image_file = file;
 	upload_error = "";
-
-	// Upload to server
-	try {
-		uploading = true;
-
-		// Validate short_name is provided
-		if (!short_name || short_name.trim() === '') {
-			upload_error = 'Please provide a short name (URL) before uploading an image.';
-			alert(upload_error);
-			uploading = false;
-			return;
-		}
-
-		// Create FormData for upload
-		const formData = new FormData();
-		formData.append('image', file);
-		formData.append('name', short_name.trim());
-
-		const response = await fetch('/api/rezepte/img/add', {
-			method: 'POST',
-			body: formData
-		});
-
-		if (!response.ok) {
-			const error_data = await response.json();
-			throw new Error(error_data.message || 'Upload failed');
-		}
-
-		const result = await response.json();
-		uploaded_image_filename = result.filename;
-		upload_error = "";
-
-	} catch (error: any) {
-		console.error('Image upload error:', error);
-		upload_error = error.message || 'Failed to upload image. Please try again.';
-		alert(`Upload failed: ${upload_error}`);
-
-		// Clear preview on error
-		image_preview_url = "";
-		uploaded_image_filename = "";
-	} finally {
-		uploading = false;
-	}
 }
 
 export function remove_selected_images(){
 	image_preview_url = "";
-	uploaded_image_filename = "";
+	selected_image_file = null;
 	upload_error = "";
 }
 
@@ -430,11 +387,6 @@ input::placeholder{
 .tag_input{
 	width: 12ch;
 }
-.upload-spinner {
-	color: white;
-	font-size: 1.2rem;
-	font-weight: bold;
-}
 </style>
 
 
@@ -453,15 +405,11 @@ input::placeholder{
 		{/if}
 
 
-		<label class=img_label for=img_picker style={uploading ? 'opacity: 0.5; cursor: not-allowed;' : ''}>
-		{#if uploading}
-			<div class="upload-spinner">Uploading...</div>
-		{:else}
+		<label class=img_label for=img_picker>
 			<svg class="upload over_img" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M288 109.3V352c0 17.7-14.3 32-32 32s-32-14.3-32-32V109.3l-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352H192c0 35.3 28.7 64 64 64s64-28.7 64-64H448c35.3 0 64 28.7 64 64v32c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V416c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/></svg>
-		{/if}
 		</label>
 	</div>
-	<input type="file" id=img_picker accept="image/webp,image/jpeg,image/jpg,image/png" onchange={show_local_image} disabled={uploading}>
+	<input type="file" id=img_picker accept="image/webp,image/jpeg,image/jpg,image/png" onchange={show_local_image}>
 	<div class=title>
 		<input class=category placeholder=Kategorie... bind:value={card_data.category}/>
 		<div>
diff --git a/src/routes/[recipeLang=recipeLang]/add/+page.server.ts b/src/routes/[recipeLang=recipeLang]/add/+page.server.ts
index 47c7eb8..5515bda 100644
--- a/src/routes/[recipeLang=recipeLang]/add/+page.server.ts
+++ b/src/routes/[recipeLang=recipeLang]/add/+page.server.ts
@@ -3,6 +3,8 @@ import type { Actions, PageServerLoad } from './$types';
 import { Recipe } from '$models/Recipe';
 import { dbConnect } from '$utils/db';
 import { invalidateRecipeCaches } from '$lib/server/cache';
+import { IMAGE_DIR } from '$env/static/private';
+import { processAndSaveRecipeImage } from '$utils/imageProcessing';
 import {
 	extractRecipeFromFormData,
 	validateRecipeData,
@@ -49,14 +51,29 @@ export const actions = {
 			}
 
 			// Handle optional image upload
-			const uploadedImage = formData.get('uploaded_image_filename')?.toString();
-			if (uploadedImage && uploadedImage.trim() !== '') {
-				// Image was uploaded - use it
-				recipeData.images = [{
-					mediapath: uploadedImage,
-					alt: '',
-					caption: ''
-				}];
+			const recipeImage = formData.get('recipe_image') as File | null;
+			if (recipeImage && recipeImage.size > 0) {
+				try {
+					// Process and save the image
+					const { filename } = await processAndSaveRecipeImage(
+						recipeImage,
+						recipeData.short_name,
+						IMAGE_DIR
+					);
+
+					recipeData.images = [{
+						mediapath: filename,
+						alt: '',
+						caption: ''
+					}];
+				} catch (imageError: any) {
+					console.error('Image processing error:', imageError);
+					return fail(400, {
+						error: `Failed to process image: ${imageError.message}`,
+						errors: ['Image processing failed'],
+						values: Object.fromEntries(formData)
+					});
+				}
 			} else {
 				// No image uploaded - use placeholder based on short_name
 				recipeData.images = [{
diff --git a/src/routes/[recipeLang=recipeLang]/add/+page.svelte b/src/routes/[recipeLang=recipeLang]/add/+page.svelte
index 6b06a71..11a43f8 100644
--- a/src/routes/[recipeLang=recipeLang]/add/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/add/+page.svelte
@@ -18,7 +18,7 @@
 	let preamble = $state("");
 	let addendum = $state("");
 	let image_preview_url = $state("");
-	let uploaded_image_filename = $state("");
+	let selected_image_file = $state<File | null>(null);
 
 	// Translation workflow state
 	let showTranslationWorkflow = $state(false);
@@ -91,7 +91,7 @@
 	let germanRecipeData = $derived({
 		...card_data,
 		...add_info,
-		images: uploaded_image_filename ? [{ mediapath: uploaded_image_filename, alt: "", caption: "" }] : [],
+		images: selected_image_file ? [{ mediapath: 'pending', alt: "", caption: "" }] : [],
 		season: season_local,
 		short_name: short_name.trim(),
 		portions: portions_local,
@@ -291,9 +291,14 @@ button.action_button {
 <form
 	method="POST"
 	bind:this={formElement}
+	enctype="multipart/form-data"
 	use:enhance={() => {
 		submitting = true;
-		return async ({ update }) => {
+		return async ({ update, formData }) => {
+			// Append the image file if one was selected
+			if (selected_image_file) {
+				formData.append('recipe_image', selected_image_file);
+			}
 			await update();
 			submitting = false;
 		};
@@ -305,7 +310,6 @@ button.action_button {
 	<input type="hidden" name="add_info_json" value={JSON.stringify(add_info)} />
 	<input type="hidden" name="season" value={JSON.stringify(season_local)} />
 	<input type="hidden" name="tags" value={JSON.stringify(card_data.tags)} />
-	<input type="hidden" name="uploaded_image_filename" value={uploaded_image_filename} />
 
 	<!-- Translation data (added after approval) -->
 	{#if translationData}
@@ -319,7 +323,7 @@ button.action_button {
 	<CardAdd
 		bind:card_data
 		bind:image_preview_url
-		bind:uploaded_image_filename
+		bind:selected_image_file
 		short_name={short_name}
 	/>
 
diff --git a/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.server.ts b/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.server.ts
index 5569b9f..357a79f 100644
--- a/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.server.ts
+++ b/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.server.ts
@@ -7,6 +7,7 @@ import { IMAGE_DIR } from '$env/static/private';
 import { rename, access, unlink } from 'fs/promises';
 import { join } from 'path';
 import { constants } from 'fs';
+import { processAndSaveRecipeImage } from '$utils/imageProcessing';
 import {
 	extractRecipeFromFormData,
 	validateRecipeData,
@@ -111,21 +112,37 @@ export const actions = {
 			}
 
 			// Handle image scenarios
-			const uploadedImage = formData.get('uploaded_image_filename')?.toString();
+			const recipeImage = formData.get('recipe_image') as File | null;
 			const keepExistingImage = formData.get('keep_existing_image') === 'true';
 			const existingImagePath = formData.get('existing_image_path')?.toString();
 
-			if (uploadedImage) {
-				// New image uploaded - delete old image files and use new one
-				if (existingImagePath && existingImagePath !== uploadedImage) {
-					await deleteRecipeImage(existingImagePath);
-				}
+			if (recipeImage && recipeImage.size > 0) {
+				try {
+					// Process and save the new image
+					const { filename } = await processAndSaveRecipeImage(
+						recipeImage,
+						recipeData.short_name,
+						IMAGE_DIR
+					);
 
-				recipeData.images = [{
-					mediapath: uploadedImage,
-					alt: existingImagePath ? (recipeData.images?.[0]?.alt || '') : '',
-					caption: existingImagePath ? (recipeData.images?.[0]?.caption || '') : ''
-				}];
+					// Delete old image files
+					if (existingImagePath && existingImagePath !== filename) {
+						await deleteRecipeImage(existingImagePath);
+					}
+
+					recipeData.images = [{
+						mediapath: filename,
+						alt: existingImagePath ? (recipeData.images?.[0]?.alt || '') : '',
+						caption: existingImagePath ? (recipeData.images?.[0]?.caption || '') : ''
+					}];
+				} catch (imageError: any) {
+					console.error('Image processing error:', imageError);
+					return fail(400, {
+						error: `Failed to process image: ${imageError.message}`,
+						errors: ['Image processing failed'],
+						values: Object.fromEntries(formData)
+					});
+				}
 			} else if (keepExistingImage && existingImagePath) {
 				// Keep existing image
 				recipeData.images = [{
diff --git a/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte b/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte
index fee4283..23b4a9f 100644
--- a/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte
@@ -27,7 +27,7 @@
 		"https://bocken.org/static/rezepte/thumb/" +
 			(data.recipe.images?.[0]?.mediapath || `${data.recipe.short_name}.webp`)
 	);
-	let uploaded_image_filename = $state("");
+	let selected_image_file = $state<File | null>(null);
 
 	// Translation workflow state
 	let showTranslationWorkflow = $state(false);
@@ -109,10 +109,10 @@
 	let currentRecipeData = $derived.by(() => {
 		// Ensure we always have a valid images array with at least one item
 		let recipeImages;
-		if (uploaded_image_filename) {
-			// New image uploaded
+		if (selected_image_file) {
+			// New image selected (will be uploaded on form submission)
 			recipeImages = [{
-				mediapath: uploaded_image_filename,
+				mediapath: 'pending',
 				alt: images[0]?.alt || "",
 				caption: images[0]?.caption || ""
 			}];
@@ -371,9 +371,14 @@
 <form
 	method="POST"
 	bind:this={formElement}
+	enctype="multipart/form-data"
 	use:enhance={() => {
 		submitting = true;
-		return async ({ update }) => {
+		return async ({ update, formData }) => {
+			// Append the image file if one was selected
+			if (selected_image_file) {
+				formData.append('recipe_image', selected_image_file);
+			}
 			await update();
 			submitting = false;
 		};
@@ -381,7 +386,7 @@
 >
 	<!-- Hidden inputs for tracking -->
 	<input type="hidden" name="original_short_name" value={old_short_name} />
-	<input type="hidden" name="keep_existing_image" value={uploaded_image_filename ? "false" : "true"} />
+	<input type="hidden" name="keep_existing_image" value={selected_image_file ? "false" : "true"} />
 	<input type="hidden" name="existing_image_path" value={images[0]?.mediapath || `${old_short_name}.webp`} />
 
 	<!-- Hidden inputs for complex nested data -->
@@ -390,7 +395,6 @@
 	<input type="hidden" name="add_info_json" value={JSON.stringify(add_info)} />
 	<input type="hidden" name="season" value={JSON.stringify(season_local)} />
 	<input type="hidden" name="tags" value={JSON.stringify(card_data.tags)} />
-	<input type="hidden" name="uploaded_image_filename" value={uploaded_image_filename} />
 	<input type="hidden" name="datecreated" value={datecreated?.toString()} />
 
 	<!-- Translation data (updated after approval or marked needs_update) -->
@@ -405,7 +409,7 @@
 	<CardAdd
 		bind:card_data
 		bind:image_preview_url
-		bind:uploaded_image_filename
+		bind:selected_image_file
 		short_name={short_name}
 	/>
 
diff --git a/src/utils/imageProcessing.ts b/src/utils/imageProcessing.ts
new file mode 100644
index 0000000..b45dc96
--- /dev/null
+++ b/src/utils/imageProcessing.ts
@@ -0,0 +1,79 @@
+import path from 'path';
+import sharp from 'sharp';
+import { generateImageHashFromBuffer, getHashedFilename } from '$utils/imageHash';
+import { validateImageFile } from '$utils/imageValidation';
+
+/**
+ * Process and save recipe image with multiple versions (full, thumb, placeholder)
+ * @param file - The image File object
+ * @param name - The base name for the image (usually recipe short_name)
+ * @param imageDir - The base directory where images are stored
+ * @returns Object with hashedFilename and unhashedFilename
+ */
+export async function processAndSaveRecipeImage(
+	file: File,
+	name: string,
+	imageDir: string
+): Promise<{ filename: string; unhashedFilename: string }> {
+	// Comprehensive security validation
+	const validationResult = await validateImageFile(file);
+	if (!validationResult.valid) {
+		throw new Error(validationResult.error || 'Invalid image file');
+	}
+
+	// Convert File to Buffer for processing
+	const arrayBuffer = await file.arrayBuffer();
+	const buffer = Buffer.from(arrayBuffer);
+
+	// Generate content hash for cache busting
+	const imageHash = generateImageHashFromBuffer(buffer);
+	const hashedFilename = getHashedFilename(name, imageHash);
+	const unhashedFilename = name + '.webp';
+
+	// Process image with Sharp - convert to WebP format
+	// Save full size - both hashed and unhashed versions
+	const fullBuffer = await sharp(buffer)
+		.toFormat('webp')
+		.webp({ quality: 90 }) // High quality for full size
+		.toBuffer();
+
+	await sharp(fullBuffer).toFile(
+		path.join(imageDir, 'rezepte', 'full', hashedFilename)
+	);
+	await sharp(fullBuffer).toFile(
+		path.join(imageDir, 'rezepte', 'full', unhashedFilename)
+	);
+
+	// Save thumbnail (800px width) - both hashed and unhashed versions
+	const thumbBuffer = await sharp(buffer)
+		.resize({ width: 800 })
+		.toFormat('webp')
+		.webp({ quality: 85 })
+		.toBuffer();
+
+	await sharp(thumbBuffer).toFile(
+		path.join(imageDir, 'rezepte', 'thumb', hashedFilename)
+	);
+	await sharp(thumbBuffer).toFile(
+		path.join(imageDir, 'rezepte', 'thumb', unhashedFilename)
+	);
+
+	// Save placeholder (20px width) - both hashed and unhashed versions
+	const placeholderBuffer = await sharp(buffer)
+		.resize({ width: 20 })
+		.toFormat('webp')
+		.webp({ quality: 60 })
+		.toBuffer();
+
+	await sharp(placeholderBuffer).toFile(
+		path.join(imageDir, 'rezepte', 'placeholder', hashedFilename)
+	);
+	await sharp(placeholderBuffer).toFile(
+		path.join(imageDir, 'rezepte', 'placeholder', unhashedFilename)
+	);
+
+	return {
+		filename: hashedFilename,
+		unhashedFilename: unhashedFilename
+	};
+}