Refactor: Use Direct Creator Upload

src/components/upload/PhotoUpload.tsx

@@ -72,33 +72,75 @@ export function PhotoUpload({
   };
 
   const uploadFile = async (file: File): Promise<UploadedImage> => {
+    // Step 1: Get direct upload URL from our edge function
+    const { data: uploadData, error: uploadError } = await supabase.functions.invoke('upload-image', {
+      body: { 
+        metadata: {
+          filename: file.name,
+          size: file.size,
+          type: file.type,
+          uploadedAt: new Date().toISOString()
+        }
+      }
+    });
+
+    if (uploadError) {
+      console.error('Upload URL error:', uploadError);
+      throw new Error(uploadError.message);
+    }
+
+    if (!uploadData?.success) {
+      throw new Error(uploadData?.error || 'Failed to get upload URL');
+    }
+
+    const { uploadURL, id } = uploadData;
+
+    // Step 2: Upload file directly to Cloudflare
     const formData = new FormData();
     formData.append('file', file);
-    formData.append('metadata', JSON.stringify({
-      filename: file.name,
-      size: file.size,
-      type: file.type,
-      uploadedAt: new Date().toISOString()
-    }));
 
-    const { data, error } = await supabase.functions.invoke('upload-image', {
+    const uploadResponse = await fetch(uploadURL, {
+      method: 'POST',
       body: formData,
     });
 
-    if (error) {
-      throw new Error(error.message || 'Upload failed');
+    if (!uploadResponse.ok) {
+      throw new Error('Direct upload to Cloudflare failed');
     }
 
-    if (!data.success) {
-      throw new Error(data.error || 'Upload failed');
+    // Step 3: Poll for upload completion and get final URLs
+    const maxAttempts = 30; // 30 seconds maximum wait
+    let attempts = 0;
+    
+    while (attempts < maxAttempts) {
+      const statusUrl = `https://ydvtmnrszybqnbcqbdcy.supabase.co/functions/v1/upload-image?id=${id}`;
+      const statusResponse = await fetch(statusUrl, {
+        method: 'GET',
+        headers: {
+          'Authorization': `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InlkdnRtbnJzenlicW5iY3FiZGN5Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTgzMjYzNTYsImV4cCI6MjA3MzkwMjM1Nn0.DM3oyapd_omP5ZzIlrT0H9qBsiQBxBRgw2tYuqgXKX4`,
+          'apikey': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InlkdnRtbnJzenlicW5iY3FiZGN5Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTgzMjYzNTYsImV4cCI6MjA3MzkwMjM1Nn0.DM3oyapd_omP5ZzIlrT0H9qBsiQBxBRgw2tYuqgXKX4'
+        }
+      });
+
+      if (statusResponse.ok) {
+        const statusData = await statusResponse.json();
+        
+        if (statusData?.success && !statusData.draft && statusData.urls) {
+          return {
+            id: statusData.id,
+            url: statusData.urls.original,
+            filename: file.name,
+            thumbnailUrl: statusData.urls.thumbnail
+          };
+        }
+      }
+
+      // Wait 1 second before checking again
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      attempts++;
     }
 
-    return {
-      id: data.id,
-      url: data.urls.original,
-      filename: data.filename,
-      thumbnailUrl: data.urls.thumbnail
-    };
+    throw new Error('Upload timeout - image processing took too long');
   };
 
   const handleFiles = async (files: FileList) => {