Fix image uploads: accept more formats, convert to JPEG, show errors

- Added HEIF, GIF, AVIF, BMP, TIFF to allowed image types
- All uploads converted to JPEG via sharp (fixes HEIC/HEIF from iPhones)
- Upload action wrapped in try/catch, errors shown in UI
- Error banner displayed above image section on failure

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/routes/(app)/devices/[id]/+page.server.ts

@@ -217,17 +217,21 @@ export const actions: Actions = {
 		const file = formData.get('image') as File;
 		if (!file || file.size === 0) return fail(400, { error: 'No file selected' });
 
-		const { filePath, thumbnailPath } = await saveImage(file, 'devices');
-		const caption = formData.get('caption') as string;
+		try {
+			const { filePath, thumbnailPath } = await saveImage(file, 'devices');
+			const caption = formData.get('caption') as string;
 
-		await db.insert(deviceImages).values({
-			deviceId: params.id,
-			filePath,
-			thumbnailPath,
-			caption: caption || null
-		});
+			await db.insert(deviceImages).values({
+				deviceId: params.id,
+				filePath,
+				thumbnailPath,
+				caption: caption || null
+			});
 
-		return { imageUploaded: true };
+			return { imageUploaded: true };
+		} catch (err) {
+			return fail(400, { error: `Upload failed: ${err instanceof Error ? err.message : 'Unknown error'}` });
+		}
 	},
 
 	deleteImage: async ({ request }) => {

src/routes/(app)/devices/[id]/+page.svelte

@@ -3,7 +3,7 @@
 	import { DEVICE_CONDITIONS, DEVICE_LOG_TYPES } from '$lib/constants.js';
 	import { formatDate, timeAgo } from '$lib/utils/date.js';
 
-	let { data } = $props();
+	let { data, form } = $props();
 	let showStatusForm = $state(false);
 	let showUploadForm = $state(false);
 	let showDocForm = $state(false);
@@ -130,6 +130,10 @@
 					</button>
 				</div>
 
+				{#if form?.error}
+					<div class="mb-3 rounded-md bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/30 dark:text-red-300">{form.error}</div>
+				{/if}
+
 				{#if showUploadForm}
 					<form method="POST" action="?/uploadImage" enctype="multipart/form-data" use:enhance class="mb-4 flex flex-wrap items-end gap-3">
 						<input type="file" name="image" accept="image/*" required