Refactor to defer photo uploads

src/components/upload/UppyPhotoSubmissionUpload.tsx

@@ -6,6 +6,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
+import { Progress } from '@/components/ui/progress';
 import { UppyPhotoUpload } from './UppyPhotoUpload';
 import { PhotoCaptionEditor, PhotoWithCaption } from './PhotoCaptionEditor';
 import { supabase } from '@/integrations/supabase/client';
@@ -28,15 +29,18 @@ export function UppyPhotoSubmissionUpload({
   const [description, setDescription] = useState('');
   const [photos, setPhotos] = useState<PhotoWithCaption[]>([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState<{ current: number; total: number } | null>(null);
   const { user } = useAuth();
   const { toast } = useToast();
 
-  const handleUploadComplete = (urls: string[]) => {
-    // Convert URLs to photo objects with empty captions
-    const newPhotos: PhotoWithCaption[] = urls.map((url, index) => ({
-      url,
+  const handleFilesSelected = (files: File[]) => {
+    // Convert files to photo objects with object URLs for preview
+    const newPhotos: PhotoWithCaption[] = files.map((file, index) => ({
+      url: URL.createObjectURL(file), // Object URL for preview
+      file, // Store the file for later upload
       caption: '',
       order: photos.length + index,
+      uploadStatus: 'pending' as const,
     }));
     setPhotos(prev => [...prev, ...newPhotos]);
   };
@@ -46,7 +50,14 @@ export function UppyPhotoSubmissionUpload({
   };
 
   const handleRemovePhoto = (index: number) => {
-    setPhotos(prev => prev.filter((_, i) => i !== index));
+    setPhotos(prev => {
+      const photo = prev[index];
+      // Revoke object URL if it exists
+      if (photo.file && photo.url.startsWith('blob:')) {
+        URL.revokeObjectURL(photo.url);
+      }
+      return prev.filter((_, i) => i !== index);
+    });
   };
 
   const handleSubmit = async () => {
@@ -80,6 +91,105 @@ export function UppyPhotoSubmissionUpload({
     setIsSubmitting(true);
 
     try {
+      // Upload all photos that haven't been uploaded yet
+      const uploadedPhotos: PhotoWithCaption[] = [];
+      const photosToUpload = photos.filter(p => p.file);
+      
+      if (photosToUpload.length > 0) {
+        setUploadProgress({ current: 0, total: photosToUpload.length });
+
+        for (let i = 0; i < photosToUpload.length; i++) {
+          const photo = photosToUpload[i];
+          setUploadProgress({ current: i + 1, total: photosToUpload.length });
+          
+          // Update status
+          setPhotos(prev => prev.map(p => 
+            p === photo ? { ...p, uploadStatus: 'uploading' as const } : p
+          ));
+
+          try {
+            // Get upload URL from edge function
+            const { data: uploadData, error: uploadError } = await supabase.functions.invoke('upload-image', {
+              body: { metadata: { requireSignedURLs: false }, variant: 'public' }
+            });
+
+            if (uploadError) throw uploadError;
+
+            const { uploadURL, id: cloudflareId } = uploadData;
+
+            // Upload file to Cloudflare
+            const formData = new FormData();
+            formData.append('file', photo.file);
+
+            const uploadResponse = await fetch(uploadURL, {
+              method: 'POST',
+              body: formData,
+            });
+
+            if (!uploadResponse.ok) {
+              throw new Error('Failed to upload to Cloudflare');
+            }
+
+            // Poll for processing completion
+            let attempts = 0;
+            const maxAttempts = 30;
+            let cloudflareUrl = '';
+
+            while (attempts < maxAttempts) {
+              const { data: { session } } = await supabase.auth.getSession();
+              const statusResponse = await fetch(
+                `https://ydvtmnrszybqnbcqbdcy.supabase.co/functions/v1/upload-image?id=${cloudflareId}`,
+                {
+                  headers: {
+                    'Authorization': `Bearer ${session?.access_token || ''}`,
+                    'apikey': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InlkdnRtbnJzenlicW5iY3FiZGN5Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTgzMjYzNTYsImV4cCI6MjA3MzkwMjM1Nn0.DM3oyapd_omP5ZzIlrT0H9qBsiQBxBRgw2tYuqgXKX4',
+                  }
+                }
+              );
+
+              if (statusResponse.ok) {
+                const status = await statusResponse.json();
+                if (status.uploaded && status.urls) {
+                  cloudflareUrl = status.urls.public;
+                  break;
+                }
+              }
+
+              await new Promise(resolve => setTimeout(resolve, 1000));
+              attempts++;
+            }
+
+            if (!cloudflareUrl) {
+              throw new Error('Upload processing timeout');
+            }
+
+            // Revoke object URL
+            URL.revokeObjectURL(photo.url);
+
+            uploadedPhotos.push({
+              ...photo,
+              url: cloudflareUrl,
+              uploadStatus: 'uploaded' as const,
+            });
+
+            // Update status
+            setPhotos(prev => prev.map(p => 
+              p === photo ? { ...p, url: cloudflareUrl, uploadStatus: 'uploaded' as const } : p
+            ));
+
+          } catch (error) {
+            console.error('Upload error:', error);
+            setPhotos(prev => prev.map(p => 
+              p === photo ? { ...p, uploadStatus: 'failed' as const } : p
+            ));
+            throw new Error(`Failed to upload ${photo.title || 'photo'}: ${error instanceof Error ? error.message : 'Unknown error'}`);
+          }
+        }
+      }
+
+      setUploadProgress(null);
+
+      // Submit to database with Cloudflare URLs
       const submissionData = {
         user_id: user.id,
         submission_type: 'photo',
@@ -87,7 +197,7 @@ export function UppyPhotoSubmissionUpload({
           title: title.trim(),
           description: description.trim(),
           photos: photos.map((photo, index) => ({
-            url: photo.url,
+            url: photo.uploadStatus === 'uploaded' ? photo.url : uploadedPhotos.find(p => p.order === photo.order)?.url || photo.url,
             caption: photo.caption.trim(),
             title: photo.title?.trim(),
             order: index,
@@ -112,7 +222,13 @@ export function UppyPhotoSubmissionUpload({
         description: 'Your photos have been submitted for review. Thank you for contributing!',
       });
 
-      // Reset form
+      // Cleanup and reset form
+      photos.forEach(photo => {
+        if (photo.url.startsWith('blob:')) {
+          URL.revokeObjectURL(photo.url);
+        }
+      });
+
       setTitle('');
       setDescription('');
       setPhotos([]);
@@ -122,13 +238,25 @@ export function UppyPhotoSubmissionUpload({
       toast({
         variant: 'destructive',
         title: 'Submission Failed',
-        description: 'There was an error submitting your photos. Please try again.',
+        description: error instanceof Error ? error.message : 'There was an error submitting your photos. Please try again.',
       });
     } finally {
       setIsSubmitting(false);
+      setUploadProgress(null);
     }
   };
 
+  // Cleanup on unmount
+  React.useEffect(() => {
+    return () => {
+      photos.forEach(photo => {
+        if (photo.url.startsWith('blob:')) {
+          URL.revokeObjectURL(photo.url);
+        }
+      });
+    };
+  }, []);
+
   const metadata = {
     submissionType: 'photo',
     parkId,
@@ -181,6 +309,7 @@ export function UppyPhotoSubmissionUpload({
             placeholder="Give your photos a descriptive title"
             maxLength={100}
             required
+            disabled={isSubmitting}
             className="transition-all duration-200 focus:ring-2 focus:ring-primary/20"
           />
           <p className="text-sm text-muted-foreground">
@@ -199,6 +328,7 @@ export function UppyPhotoSubmissionUpload({
             placeholder="Add a general description about these photos..."
             maxLength={500}
             rows={3}
+            disabled={isSubmitting}
             className="transition-all duration-200 focus:ring-2 focus:ring-primary/20 resize-none"
           />
           <p className="text-sm text-muted-foreground">
@@ -216,7 +346,8 @@ export function UppyPhotoSubmissionUpload({
             )}
           </div>
           <UppyPhotoUpload
-            onUploadComplete={handleUploadComplete}
+            onFilesSelected={handleFilesSelected}
+            deferUpload={true}
             maxFiles={10}
             maxSizeMB={25}
             metadata={metadata}
@@ -224,6 +355,7 @@ export function UppyPhotoSubmissionUpload({
             showPreview={false}
             size="default"
             enableDragDrop={true}
+            disabled={isSubmitting}
           />
         </div>
 
@@ -242,6 +374,18 @@ export function UppyPhotoSubmissionUpload({
         <Separator />
 
         <div className="space-y-4">
+          {uploadProgress && (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between text-sm">
+                <span className="font-medium">Uploading photos...</span>
+                <span className="text-muted-foreground">
+                  {uploadProgress.current} of {uploadProgress.total}
+                </span>
+              </div>
+              <Progress value={(uploadProgress.current / uploadProgress.total) * 100} />
+            </div>
+          )}
+
           <Button 
             onClick={handleSubmit}
             disabled={isSubmitting || !title.trim() || photos.length === 0}
@@ -251,7 +395,7 @@ export function UppyPhotoSubmissionUpload({
             {isSubmitting ? (
               <div className="flex items-center gap-2">
                 <div className="w-4 h-4 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full animate-spin" />
-                Submitting Photos...
+                {uploadProgress ? `Uploading ${uploadProgress.current}/${uploadProgress.total}...` : 'Submitting...'}
               </div>
             ) : (
               <div className="flex items-center gap-2">