Fix photo upload and display

src/components/upload/PhotoSubmissionUpload.tsx

@@ -42,6 +42,51 @@ export function PhotoSubmissionUpload({ onSubmissionComplete, parkId, rideId }:
     setSelectedFiles(prev => prev.filter((_, i) => i !== index));
   };
 
+  const uploadFileToCloudflare = async (file: File): Promise<{ id: string; url: string }> => {
+    // Get upload URL from Supabase edge function
+    const { data: uploadData, error: uploadError } = await supabase.functions.invoke('upload-image', {
+      method: 'POST',
+      body: JSON.stringify({
+        filename: file.name,
+        contentType: file.type,
+      }),
+    });
+
+    if (uploadError || !uploadData?.uploadURL) {
+      throw new Error('Failed to get upload URL');
+    }
+
+    // Upload file directly to Cloudflare
+    const formData = new FormData();
+    formData.append('file', file);
+
+    const uploadResponse = await fetch(uploadData.uploadURL, {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (!uploadResponse.ok) {
+      throw new Error('Failed to upload file to Cloudflare');
+    }
+
+    const result = await uploadResponse.json();
+    
+    // Get the delivery URL
+    const { data: statusData, error: statusError } = await supabase.functions.invoke('upload-image', {
+      method: 'GET',
+      body: JSON.stringify({ imageId: result.result.id }),
+    });
+
+    if (statusError || !statusData?.url) {
+      throw new Error('Failed to get image URL');
+    }
+
+    return {
+      id: result.result.id,
+      url: statusData.url,
+    };
+  };
+
   const handleSubmit = async () => {
     if (!user) {
       toast({
@@ -63,17 +108,17 @@ export function PhotoSubmissionUpload({ onSubmissionComplete, parkId, rideId }:
 
     setUploading(true);
     try {
-      // Upload files to a temporary location or process them for moderation
+      // Upload files to Cloudflare Images first
       const photoSubmissions = await Promise.all(
         selectedFiles.map(async (file, index) => {
-          // Create a blob URL for preview
+          const uploadResult = await uploadFileToCloudflare(file);
-          const url = URL.createObjectURL(file);
           
           return {
             filename: file.name,
             size: file.size,
             type: file.type,
-            url, // In a real implementation, you'd upload to storage first
+            url: uploadResult.url,
+            imageId: uploadResult.id,
             caption: index === 0 ? caption : '', // Only first image gets the caption
           };
         })