Fix Cloudflare image upload

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
         };
       }
 

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
         }),
         {