Refactor: Use Direct Creator Upload

supabase/functions/upload-image/index.ts

@@ -19,108 +19,121 @@ serve(async (req) => {
       throw new Error('Missing Cloudflare credentials')
     }
 
-    if (req.method !== 'POST') {
-      return new Response(
-        JSON.stringify({ error: 'Method not allowed' }),
-        { 
-          status: 405, 
-          headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
+    if (req.method === 'POST') {
+      // Request a direct upload URL from Cloudflare
+      const { metadata = {} } = await req.json().catch(() => ({}))
+
+      const directUploadResponse = await fetch(
+        `https://api.cloudflare.com/client/v4/accounts/${CLOUDFLARE_ACCOUNT_ID}/images/v2/direct_upload`,
+        {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${CLOUDFLARE_IMAGES_API_TOKEN}`,
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            requireSignedURLs: false,
+            metadata: metadata
+          }),
         }
       )
-    }
 
-    const formData = await req.formData()
-    const file = formData.get('file') as File
-    
-    if (!file) {
-      return new Response(
-        JSON.stringify({ error: 'No file provided' }),
-        { 
-          status: 400, 
-          headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
-        }
-      )
-    }
+      const directUploadResult = await directUploadResponse.json()
 
-    // Validate file size (10MB limit)
-    const maxSize = 10 * 1024 * 1024 // 10MB
-    if (file.size > maxSize) {
-      return new Response(
-        JSON.stringify({ error: 'File size exceeds 10MB limit' }),
-        { 
-          status: 400, 
-          headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
-        }
-      )
-    }
-
-    // Validate file type
-    const allowedTypes = ['image/jpeg', 'image/png', 'image/webp']
-    if (!allowedTypes.includes(file.type)) {
-      return new Response(
-        JSON.stringify({ error: 'Invalid file type. Only JPEG, PNG, and WebP are allowed.' }),
-        { 
-          status: 400, 
-          headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
-        }
-      )
-    }
-
-    // Create FormData for Cloudflare Images API
-    const cloudflareFormData = new FormData()
-    cloudflareFormData.append('file', file)
-
-    // Optional metadata
-    const metadata = formData.get('metadata')
-    if (metadata) {
-      cloudflareFormData.append('metadata', metadata.toString())
-    }
-
-    // Upload to Cloudflare Images
-    const uploadResponse = await fetch(
-      `https://api.cloudflare.com/client/v4/accounts/${CLOUDFLARE_ACCOUNT_ID}/images/v1`,
-      {
-        method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${CLOUDFLARE_IMAGES_API_TOKEN}`,
-        },
-        body: cloudflareFormData,
+      if (!directUploadResponse.ok) {
+        console.error('Cloudflare direct upload error:', directUploadResult)
+        return new Response(
+          JSON.stringify({ 
+            error: 'Failed to get upload URL', 
+            details: directUploadResult.errors || directUploadResult.error 
+          }),
+          { 
+            status: 500, 
+            headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
+          }
+        )
       }
-    )
 
-    const uploadResult = await uploadResponse.json()
-
-    if (!uploadResponse.ok) {
-      console.error('Cloudflare upload error:', uploadResult)
+      // Return the upload URL and image ID to the client
       return new Response(
-        JSON.stringify({ 
-          error: 'Failed to upload image', 
-          details: uploadResult.errors || uploadResult.error 
+        JSON.stringify({
+          success: true,
+          uploadURL: directUploadResult.result.uploadURL,
+          id: directUploadResult.result.id,
+        }),
+        { 
+          headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
+        }
+      )
+    } 
+
+    if (req.method === 'GET') {
+      // Check image status endpoint
+      const url = new URL(req.url)
+      const imageId = url.searchParams.get('id')
+      
+      if (!imageId) {
+        return new Response(
+          JSON.stringify({ error: 'Image ID is required' }),
+          { 
+            status: 400, 
+            headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
+          }
+        )
+      }
+
+      const imageResponse = await fetch(
+        `https://api.cloudflare.com/client/v4/accounts/${CLOUDFLARE_ACCOUNT_ID}/images/v1/${imageId}`,
+        {
+          headers: {
+            'Authorization': `Bearer ${CLOUDFLARE_IMAGES_API_TOKEN}`,
+          },
+        }
+      )
+
+      const imageResult = await imageResponse.json()
+
+      if (!imageResponse.ok) {
+        console.error('Cloudflare image status error:', imageResult)
+        return new Response(
+          JSON.stringify({ 
+            error: 'Failed to get image status', 
+            details: imageResult.errors || imageResult.error 
+          }),
+          { 
+            status: 500, 
+            headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
+          }
+        )
+      }
+
+      // Return the image details with convenient URLs
+      const result = imageResult.result
+      return new Response(
+        JSON.stringify({
+          success: true,
+          id: result.id,
+          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`,
+          } : null
         }),
         { 
-          status: 500, 
           headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
         }
       )
     }
 
-    // Return the upload result with image URLs
     return new Response(
-      JSON.stringify({
-        success: true,
-        id: uploadResult.result.id,
-        filename: uploadResult.result.filename,
-        uploaded: uploadResult.result.uploaded,
-        variants: uploadResult.result.variants,
-        // Provide convenient URLs for different sizes
-        urls: {
-          original: uploadResult.result.variants[0], // First variant is usually the original
-          thumbnail: `${uploadResult.result.variants[0]}/w=400,h=400,fit=crop`, // 400x400 thumbnail
-          medium: `${uploadResult.result.variants[0]}/w=800,h=600,fit=cover`, // 800x600 medium
-          large: `${uploadResult.result.variants[0]}/w=1200,h=900,fit=cover`, // 1200x900 large
-        }
-      }),
+      JSON.stringify({ error: 'Method not allowed' }),
       { 
+        status: 405, 
         headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
       }
     )