Enhance image upload handling by integrating HEIC to JPEG conversion in receipts routes. Update ReceiptForm and related components to improve user feedback during image processing, ensuring compatibility with HEIC files. Refactor image handling logic for better maintainability and user experience.

.svelte-kit/types/src/routes/receipts/proxy+page.server.ts

@@ -2,6 +2,7 @@
 import { fail } from "@sveltejs/kit";
 import type { Actions, PageServerLoad } from "./$types";
 import type { StackqReceipt } from "$lib/types/receipts";
+import { convertHeicFileToJpegIfNeeded } from "$lib/convert-heic-server";
 import { validateImageUpload } from "$lib/validate-image-upload";
 
 const COLLECTION = "Stackq_Receipts";
@@ -37,12 +38,24 @@ export const actions = {
       if (imgError) return fail(400, { error: imgError, Type });
     }
 
+    let imageToSave: File | null = hasImage ? imageFile : null;
+    if (imageToSave) {
+      try {
+        imageToSave = await convertHeicFileToJpegIfNeeded(imageToSave);
+      } catch {
+        return fail(400, {
+          error: "Could not convert HEIC image. Try saving as JPEG (iPhone: Settings → Camera → Formats) or use a different photo.",
+          Type,
+        });
+      }
+    }
+
     const body: Record<string, unknown> = {
       Status: "New",
       Type: TYPE_OPTIONS.includes(Type as (typeof TYPE_OPTIONS)[number]) ? Type : "Purchase",
       User: user.id,
     };
-    if (hasImage) body.Image = imageFile;
+    if (imageToSave) body.Image = imageToSave;
 
     try {
       await locals.pb.collection(COLLECTION).create(body);

src/lib/convert-heic-server.ts

@@ -0,0 +1,39 @@
+/**
+ * Server-side HEIC conversion using heic-convert (Node). Use in form actions only.
+ */
+
+export function isHeicFile(file: File): boolean {
+  const name = file.name.toLowerCase();
+  const type = (file.type ?? "").toLowerCase();
+  return (
+    name.endsWith(".heic") ||
+    name.endsWith(".heif") ||
+    type === "image/heic" ||
+    type === "image/heif"
+  );
+}
+
+/**
+ * If the file is HEIC/HEIF, convert to JPEG and return a new File. Otherwise return the original.
+ */
+export async function convertHeicFileToJpegIfNeeded(file: File): Promise<File> {
+  if (!isHeicFile(file)) return file;
+
+  const arrayBuffer = await file.arrayBuffer();
+  const inputBuffer = Buffer.from(arrayBuffer);
+  const convert = (await import("heic-convert")).default as (opts: {
+    buffer: Buffer;
+    format: string;
+    quality?: number;
+  }) => Promise<Buffer>;
+  const outputBuffer = await convert({
+    buffer: inputBuffer,
+    format: "JPEG",
+    quality: 0.92,
+  });
+  const baseName = file.name.replace(/\.[^.]+$/i, "") || "image";
+  return new File([outputBuffer], `${baseName}.jpg`, {
+    type: "image/jpeg",
+    lastModified: Date.now(),
+  });
+}

src/lib/convert-heic.ts

@@ -1,15 +1,25 @@
+function isHeifConsoleMessage(msg: string): boolean {
+  return /HEIF|parse HEIF|Could not parse/i.test(msg);
+}
+
 /**
  * Convert HEIC/HEIF blob to JPEG. Uses heic2any only when this function is called
  * (dynamic import), so the receipt page can load even if heic2any fails to resolve.
- * Suppresses the library's "Could not parse HEIF file" console errors during conversion.
+ * Suppresses the library's "Could not parse HEIF file" console output during conversion.
  */
 export async function convertHeicBlobToJpeg(blob: Blob): Promise<Blob> {
   const originalError = console.error;
+  const originalWarn = console.warn;
   console.error = (...args: unknown[]) => {
     const msg = args[0]?.toString?.() ?? "";
-    if (msg.includes("HEIF") || msg.includes("parse HEIF")) return;
+    if (isHeifConsoleMessage(msg)) return;
     originalError.apply(console, args);
   };
+  console.warn = (...args: unknown[]) => {
+    const msg = args[0]?.toString?.() ?? "";
+    if (isHeifConsoleMessage(msg)) return;
+    originalWarn.apply(console, args);
+  };
   try {
     const mod = await import(/* @vite-ignore */ "heic2any");
     const heic2any = (mod as unknown as {
@@ -19,5 +29,6 @@ export async function convertHeicBlobToJpeg(blob: Blob): Promise<Blob> {
     return Array.isArray(out) ? out[0] : out;
   } finally {
     console.error = originalError;
+    console.warn = originalWarn;
   }
 }

src/lib/convert-image-to-webp.ts

@@ -1,6 +1,6 @@
 import { convertHeicBlobToJpeg } from "./convert-heic";
 
-function isHeicFile(file: File): boolean {
+export function isHeicFile(file: File): boolean {
   const name = file.name.toLowerCase();
   const type = (file.type ?? "").toLowerCase();
   return (

src/routes/receipts/+page.server.ts

@@ -1,6 +1,7 @@
 import { fail } from "@sveltejs/kit";
 import type { Actions, PageServerLoad } from "./$types";
 import type { StackqReceipt } from "$lib/types/receipts";
+import { convertHeicFileToJpegIfNeeded } from "$lib/convert-heic-server";
 import { validateImageUpload } from "$lib/validate-image-upload";
 
 const COLLECTION = "Stackq_Receipts";
@@ -36,12 +37,24 @@ export const actions: Actions = {
       if (imgError) return fail(400, { error: imgError, Type });
     }
 
+    let imageToSave: File | null = hasImage ? imageFile : null;
+    if (imageToSave) {
+      try {
+        imageToSave = await convertHeicFileToJpegIfNeeded(imageToSave);
+      } catch {
+        return fail(400, {
+          error: "Could not convert HEIC image. Try saving as JPEG (iPhone: Settings → Camera → Formats) or use a different photo.",
+          Type,
+        });
+      }
+    }
+
     const body: Record<string, unknown> = {
       Status: "New",
       Type: TYPE_OPTIONS.includes(Type as (typeof TYPE_OPTIONS)[number]) ? Type : "Purchase",
       User: user.id,
     };
-    if (hasImage) body.Image = imageFile;
+    if (imageToSave) body.Image = imageToSave;
 
     try {
       await locals.pb.collection(COLLECTION).create(body);

src/routes/receipts/ReceiptForm.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Button } from "$lib/components/ui/button";
   import { Label } from "$lib/components/ui/label";
-  import { convertImageToWebP, isAcceptableImageFile } from "$lib/convert-image-to-webp";
+  import { convertImageToWebP, isAcceptableImageFile, isHeicFile } from "$lib/convert-image-to-webp";
   import { enhance } from "$app/forms";
   import Loader2Icon from "@lucide/svelte/icons/loader-2";
 
@@ -34,21 +34,24 @@
       imageFileName = null;
       return;
     }
-    imageConverting = true;
     imageFileName = null;
-    // Let the UI paint "Processing image…" before we block the main thread
-    await new Promise((r) => setTimeout(r, 0));
-    try {
-      const webpFile = await convertImageToWebP(file);
-      const dt = new DataTransfer();
-      dt.items.add(webpFile);
-      input.files = dt.files;
-      imageFileName = webpFile.name;
-    } catch {
-      imageFileName = file.name + " (conversion failed)";
-      input.value = "";
-    } finally {
-      imageConverting = false;
+    if (isHeicFile(file)) {
+      imageFileName = file.name + " (will convert on server)";
+    } else {
+      imageConverting = true;
+      await new Promise((r) => setTimeout(r, 0));
+      try {
+        const webpFile = await convertImageToWebP(file);
+        const dt = new DataTransfer();
+        dt.items.add(webpFile);
+        input.files = dt.files;
+        imageFileName = webpFile.name;
+      } catch {
+        imageFileName = file.name + " (conversion failed)";
+        input.value = "";
+      } finally {
+        imageConverting = false;
+      }
     }
   }
 </script>

src/routes/receipts/[id]/+page.server.ts

@@ -2,6 +2,7 @@ import { error, fail, redirect } from "@sveltejs/kit";
 import type { Actions, PageServerLoad } from "./$types";
 import type { StackqReceipt } from "$lib/types/receipts";
 import type { ReceiptDataShape } from "$lib/types/receipts";
+import { convertHeicFileToJpegIfNeeded } from "$lib/convert-heic-server";
 import { parseNumWithDefault } from "$lib/parse-form";
 import { validateImageUpload } from "$lib/validate-image-upload";
 
@@ -45,6 +46,18 @@ export const actions: Actions = {
       if (imgError) return fail(400, { error: imgError, form: "update" });
     }
 
+    let imageToSave: File | null = hasImage ? imageFile : null;
+    if (imageToSave) {
+      try {
+        imageToSave = await convertHeicFileToJpegIfNeeded(imageToSave);
+      } catch {
+        return fail(400, {
+          error: "Could not convert HEIC image. Try saving as JPEG (iPhone: Settings → Camera → Formats) or use a different photo.",
+          form: "update",
+        });
+      }
+    }
+
     let Data: ReceiptDataShape = {};
     try {
       const parsed = JSON.parse(dataJson) as unknown;
@@ -83,7 +96,7 @@ export const actions: Actions = {
       Type: TYPE_OPTIONS.includes(Type as (typeof TYPE_OPTIONS)[number]) ? Type : "Purchase",
       Data: Object.keys(Data).length ? Data : undefined,
     };
-    if (hasImage) body.Image = imageFile;
+    if (imageToSave) body.Image = imageToSave;
 
     try {
       await locals.pb.collection(COLLECTION).update(id, body);

src/routes/receipts/[id]/+page.svelte

@@ -2,9 +2,10 @@
   import { Button } from "$lib/components/ui/button";
   import { Card, CardContent } from "$lib/components/ui/card";
   import * as Collapsible from "$lib/components/ui/collapsible";
+  import * as Dialog from "$lib/components/ui/dialog";
   import { Input } from "$lib/components/ui/input";
   import { Label } from "$lib/components/ui/label";
-  import { convertImageToWebP, isAcceptableImageFile } from "$lib/convert-image-to-webp";
+  import { convertImageToWebP, isAcceptableImageFile, isHeicFile } from "$lib/convert-image-to-webp";
   import { POCKETBASE_BASE_URL } from "$lib/pocketbase";
   import { enhance } from "$app/forms";
   import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
@@ -128,6 +129,7 @@
   /** On small screens image is collapsed by default; on lg+ expanded. */
   let imageOpen = $state(false);
   let imageOpenInitialized = $state(false);
+  let imageFullscreenOpen = $state(false);
   $effect(() => {
     if (typeof window === "undefined" || imageOpenInitialized) return;
     imageOpenInitialized = true;
@@ -143,20 +145,25 @@
       imageFileName = null;
       return;
     }
-    imageConverting = true;
     selectedImageFile = null;
     imageFileName = null;
-    await new Promise((r) => setTimeout(r, 0));
-    try {
-      const webpFile = await convertImageToWebP(file);
-      selectedImageFile = webpFile;
-      imageFileName = webpFile.name;
-    } catch {
-      selectedImageFile = null;
-      imageFileName = null;
-      if (input) input.value = "";
-    } finally {
-      imageConverting = false;
+    if (isHeicFile(file)) {
+      selectedImageFile = file;
+      imageFileName = file.name + " (will convert on server)";
+    } else {
+      imageConverting = true;
+      await new Promise((r) => setTimeout(r, 0));
+      try {
+        const webpFile = await convertImageToWebP(file);
+        selectedImageFile = webpFile;
+        imageFileName = webpFile.name;
+      } catch {
+        selectedImageFile = null;
+        imageFileName = null;
+        if (input) input.value = "";
+      } finally {
+        imageConverting = false;
+      }
     }
   }
   function imageLoadError() {
@@ -206,13 +213,20 @@
                       <a href={url} download class="text-primary hover:underline text-sm">Download image</a>
                     </div>
                   {:else}
-                    <img
-                      src={url}
-                      alt="Receipt"
-                      class="h-auto w-full rounded object-contain"
-                      loading="lazy"
-                      onerror={imageLoadError}
-                    />
+                    <button
+                      type="button"
+                      onclick={() => (imageFullscreenOpen = true)}
+                      class="focus:ring-ring hover:opacity-95 h-auto w-full rounded object-contain focus:outline-none focus:ring-2 focus:ring-offset-2"
+                      aria-label="View receipt image full screen"
+                    >
+                      <img
+                        src={url}
+                        alt="Receipt"
+                        class="h-auto w-full rounded object-contain"
+                        loading="lazy"
+                        onerror={imageLoadError}
+                      />
+                    </button>
                   {/if}
                 </div>
               {:else}
@@ -437,6 +451,21 @@
       </Card>
     </div>
 
+    {#if currentImageUrl}
+      <Dialog.Root bind:open={imageFullscreenOpen}>
+        <Dialog.Content
+          class="fixed inset-0 z-50 flex max-h-none max-w-none flex-col items-center justify-center gap-4 border-0 bg-black/95 p-4 text-white focus:outline-none"
+          showCloseButton={true}
+        >
+          <img
+            src={currentImageUrl}
+            alt="Receipt (full screen)"
+            class="max-h-[calc(100vh-4rem)] max-w-full cursor-default object-contain"
+          />
+        </Dialog.Content>
+      </Dialog.Root>
+    {/if}
+
     <Card>
       <CardContent class="flex flex-row flex-wrap items-center justify-between gap-4 py-4">
         <p class="text-muted-foreground text-sm">