HEIC support

src/lib/utils.ts

@@ -1,5 +1,6 @@
 import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
+import heic2any from "heic2any"
 
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs))
@@ -38,7 +39,28 @@ export const compressImageBase64 = (base64Str: string, maxWidth = 800, quality =
 };
 
 export const convertImageToWebpFile = async (file: File): Promise<File> => {
-    return new Promise((resolve) => {
+    return new Promise(async (resolve) => {
+        let processableFile: File | Blob = file;
+
+        // Convert HEIC/HEIF to JPEG first so the browser can read it
+        const isHeic = file.name.toLowerCase().endsWith('.heic') || file.name.toLowerCase().endsWith('.heif');
+        if (isHeic) {
+            try {
+                const converted = await heic2any({
+                    blob: file,
+                    toType: "image/jpeg",
+                    quality: 0.8 // high quality intermediate step
+                });
+                
+                // heic2any can return an array of blobs if it's an image sequence, just take the first
+                processableFile = Array.isArray(converted) ? converted[0] : converted;
+            } catch (err) {
+                console.error("Failed to convert HEIC image:", err);
+                // If conversion fails, just fall back to returning the original file
+                return resolve(file);
+            }
+        }
+
         const reader = new FileReader();
         reader.onload = (e) => {
             const img = new Image();
@@ -92,6 +114,6 @@ export const convertImageToWebpFile = async (file: File): Promise<File> => {
             img.src = e.target?.result as string;
         };
         reader.onerror = () => resolve(file); // Fallback
-        reader.readAsDataURL(file);
+        reader.readAsDataURL(processableFile);
     });
 };