From 47ef042b6f207fd1c8b8fd3854a86576e3cacccd Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 28 Sep 2025 17:26:20 +0000
Subject: [PATCH] Fix Cloudflare image upload

---
 src/components/upload/PhotoUpload.tsx    | 10 +++++++---
 supabase/functions/upload-image/index.ts | 22 ++++++++++++++--------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/upload/PhotoUpload.tsx b/src/components/upload/PhotoUpload.tsx
index d6348a7c..69efc61e 100644
--- a/src/components/upload/PhotoUpload.tsx
+++ b/src/components/upload/PhotoUpload.tsx
@@ -81,7 +81,8 @@ export function PhotoUpload({
           size: file.size,
           type: file.type,
           uploadedAt: new Date().toISOString()
-        }
+        },
+        variant: isAvatar ? 'avatar' : 'public'
       }
     });
 
@@ -120,11 +121,14 @@ export function PhotoUpload({
       });
 
       if (!statusError && statusData?.success && statusData.uploaded && statusData.urls) {
+        const imageUrl = isAvatar ? statusData.urls.avatar : statusData.urls.original;
+        const thumbUrl = isAvatar ? statusData.urls.avatar : statusData.urls.thumbnail;
+        
         return {
           id: statusData.id,
-          url: statusData.urls.original,
+          url: imageUrl,
           filename: file.name,
-          thumbnailUrl: statusData.urls.thumbnail
+          thumbnailUrl: thumbUrl
         };
       }
 
diff --git a/supabase/functions/upload-image/index.ts b/supabase/functions/upload-image/index.ts
index 205f5ac6..105db259 100644
--- a/supabase/functions/upload-image/index.ts
+++ b/supabase/functions/upload-image/index.ts
@@ -14,14 +14,15 @@ serve(async (req) => {
   try {
     const CLOUDFLARE_ACCOUNT_ID = Deno.env.get('CLOUDFLARE_ACCOUNT_ID')
     const CLOUDFLARE_IMAGES_API_TOKEN = Deno.env.get('CLOUDFLARE_IMAGES_API_TOKEN')
+    const CLOUDFLARE_ACCOUNT_HASH = Deno.env.get('CLOUDFLARE_ACCOUNT_HASH')
 
-    if (!CLOUDFLARE_ACCOUNT_ID || !CLOUDFLARE_IMAGES_API_TOKEN) {
+    if (!CLOUDFLARE_ACCOUNT_ID || !CLOUDFLARE_IMAGES_API_TOKEN || !CLOUDFLARE_ACCOUNT_HASH) {
       throw new Error('Missing Cloudflare credentials')
     }
 
     if (req.method === 'POST') {
       // Request a direct upload URL from Cloudflare
-      const { metadata = {} } = await req.json().catch(() => ({}))
+      const { metadata = {}, variant = 'public' } = await req.json().catch(() => ({}))
 
       // Create FormData for the request (Cloudflare API requires multipart/form-data)
       const formData = new FormData()
@@ -109,6 +110,10 @@ serve(async (req) => {
 
       // Return the image details with convenient URLs
       const result = imageResult.result
+      
+      // Construct proper imagedelivery.net URLs using account hash and image ID
+      const baseUrl = `https://imagedelivery.net/${CLOUDFLARE_ACCOUNT_HASH}/${result.id}`
+      
       return new Response(
         JSON.stringify({
           success: true,
@@ -116,12 +121,13 @@ serve(async (req) => {
           uploaded: result.uploaded,
           variants: result.variants,
           draft: result.draft,
-          // Provide convenient URLs for different sizes if not draft
-          urls: result.variants && result.variants.length > 0 ? {
-            original: result.variants[0],
-            thumbnail: `${result.variants[0]}/w=400,h=400,fit=crop`,
-            medium: `${result.variants[0]}/w=800,h=600,fit=cover`,
-            large: `${result.variants[0]}/w=1200,h=900,fit=cover`,
+          // Provide convenient URLs using proper Cloudflare Images format
+          urls: result.uploaded ? {
+            original: `${baseUrl}/public`,
+            thumbnail: `${baseUrl}/thumbnail`,
+            medium: `${baseUrl}/medium`,
+            large: `${baseUrl}/large`,
+            avatar: `${baseUrl}/avatar`,
           } : null
         }),
         {