feat: Implement Uppy photo upload

package.json

@@ -42,6 +42,12 @@
     "@radix-ui/react-tooltip": "^1.2.7",
     "@supabase/supabase-js": "^2.57.4",
     "@tanstack/react-query": "^5.83.0",
+    "@uppy/core": "^5.0.2",
+    "@uppy/dashboard": "^5.0.2",
+    "@uppy/image-editor": "^4.0.1",
+    "@uppy/react": "^5.1.0",
+    "@uppy/status-bar": "^5.0.1",
+    "@uppy/xhr-upload": "^5.0.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",

src/components/rides/RidePhotoGallery.tsx

@@ -4,7 +4,7 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { useAuth } from '@/hooks/useAuth';
 import { useNavigate } from 'react-router-dom';
-import { PhotoSubmissionUpload } from '@/components/upload/PhotoSubmissionUpload';
+import { UppyPhotoSubmissionUpload } from '@/components/upload/UppyPhotoSubmissionUpload';
 import { supabase } from '@/integrations/supabase/client';
 
 interface RidePhoto {
@@ -67,7 +67,7 @@ export function RidePhotoGallery({ rideId, rideName, parkId }: RidePhotoGalleryP
             Back to Gallery
           </Button>
         </div>
-        <PhotoSubmissionUpload
+        <UppyPhotoSubmissionUpload
           rideId={rideId}
           parkId={parkId}
           onSubmissionComplete={handleSubmissionComplete}

src/components/upload/UppyPhotoSubmissionUpload.tsx

@@ -0,0 +1,194 @@
+import React, { useState } from 'react';
+import { Card } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+import { UppyPhotoUpload } from './UppyPhotoUpload';
+import { supabase } from '@/integrations/supabase/client';
+import { useAuth } from '@/hooks/useAuth';
+import { useToast } from '@/hooks/use-toast';
+import { Camera } from 'lucide-react';
+
+interface UppyPhotoSubmissionUploadProps {
+  onSubmissionComplete?: () => void;
+  parkId?: string;
+  rideId?: string;
+}
+
+export function UppyPhotoSubmissionUpload({
+  onSubmissionComplete,
+  parkId,
+  rideId,
+}: UppyPhotoSubmissionUploadProps) {
+  const [title, setTitle] = useState('');
+  const [caption, setCaption] = useState('');
+  const [uploadedUrls, setUploadedUrls] = useState<string[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { user } = useAuth();
+  const { toast } = useToast();
+
+  const handleUploadComplete = (urls: string[]) => {
+    setUploadedUrls(urls);
+  };
+
+  const handleSubmit = async () => {
+    if (!user) {
+      toast({
+        variant: 'destructive',
+        title: 'Authentication Required',
+        description: 'Please sign in to submit photos.',
+      });
+      return;
+    }
+
+    if (uploadedUrls.length === 0) {
+      toast({
+        variant: 'destructive',
+        title: 'No Photos',
+        description: 'Please upload at least one photo before submitting.',
+      });
+      return;
+    }
+
+    if (!title.trim()) {
+      toast({
+        variant: 'destructive',
+        title: 'Title Required',
+        description: 'Please provide a title for your photo submission.',
+      });
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const submissionData = {
+        user_id: user.id,
+        submission_type: 'photo',
+        content: {
+          title: title.trim(),
+          caption: caption.trim(),
+          photos: uploadedUrls.map((url, index) => ({
+            url,
+            order: index,
+          })),
+          context: {
+            park_id: parkId,
+            ride_id: rideId,
+          },
+        },
+      };
+
+      const { error } = await supabase
+        .from('content_submissions')
+        .insert(submissionData);
+
+      if (error) {
+        throw error;
+      }
+
+      toast({
+        title: 'Submission Successful',
+        description: 'Your photos have been submitted for review. Thank you for contributing!',
+      });
+
+      // Reset form
+      setTitle('');
+      setCaption('');
+      setUploadedUrls([]);
+      onSubmissionComplete?.();
+    } catch (error) {
+      console.error('Submission error:', error);
+      toast({
+        variant: 'destructive',
+        title: 'Submission Failed',
+        description: 'There was an error submitting your photos. Please try again.',
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const metadata = {
+    submissionType: 'photo',
+    parkId,
+    rideId,
+    userId: user?.id,
+  };
+
+  return (
+    <Card className="p-6">
+      <div className="space-y-6">
+        <div className="flex items-center gap-2">
+          <Camera className="h-5 w-5 text-primary" />
+          <h3 className="text-lg font-semibold">Submit Photos</h3>
+        </div>
+
+        <div className="space-y-4">
+          <div>
+            <Label htmlFor="title">Title *</Label>
+            <Input
+              id="title"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="Give your photos a descriptive title"
+              maxLength={100}
+              required
+            />
+            <p className="text-sm text-muted-foreground mt-1">
+              {title.length}/100 characters
+            </p>
+          </div>
+
+          <div>
+            <Label htmlFor="caption">Caption</Label>
+            <Textarea
+              id="caption"
+              value={caption}
+              onChange={(e) => setCaption(e.target.value)}
+              placeholder="Add a description or story about these photos..."
+              maxLength={500}
+              rows={3}
+            />
+            <p className="text-sm text-muted-foreground mt-1">
+              {caption.length}/500 characters
+            </p>
+          </div>
+
+          <div>
+            <Label>Photos</Label>
+            <UppyPhotoUpload
+              onUploadComplete={handleUploadComplete}
+              maxFiles={10}
+              maxSizeMB={25}
+              metadata={metadata}
+              variant="public"
+              className="mt-2"
+            />
+            {uploadedUrls.length > 0 && (
+              <p className="text-sm text-muted-foreground mt-2">
+                {uploadedUrls.length} photo(s) uploaded and ready to submit
+              </p>
+            )}
+          </div>
+        </div>
+
+        <div className="flex gap-3">
+          <Button
+            onClick={handleSubmit}
+            disabled={isSubmitting || uploadedUrls.length === 0 || !title.trim()}
+            className="flex-1"
+          >
+            {isSubmitting ? 'Submitting...' : 'Submit Photos'}
+          </Button>
+        </div>
+
+        <p className="text-sm text-muted-foreground">
+          All photo submissions are reviewed before being published. Please ensure your photos
+          follow our community guidelines and are appropriate for all audiences.
+        </p>
+      </div>
+    </Card>
+  );
+}

src/components/upload/UppyPhotoUpload.tsx

@@ -0,0 +1,294 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Uppy from '@uppy/core';
+import Dashboard from '@uppy/dashboard';
+import XHRUpload from '@uppy/xhr-upload';
+import ImageEditor from '@uppy/image-editor';
+import { DashboardModal } from '@uppy/react';
+import { supabase } from '@/integrations/supabase/client';
+import { useToast } from '@/hooks/use-toast';
+import { Button } from '@/components/ui/button';
+import { Upload, Image as ImageIcon } from 'lucide-react';
+
+import '@uppy/core/dist/style.min.css';
+import '@uppy/dashboard/dist/style.min.css';
+import '@uppy/image-editor/dist/style.min.css';
+
+interface UppyPhotoUploadProps {
+  onUploadComplete?: (urls: string[]) => void;
+  onUploadStart?: () => void;
+  onUploadError?: (error: Error) => void;
+  maxFiles?: number;
+  maxSizeMB?: number;
+  allowedFileTypes?: string[];
+  metadata?: Record<string, any>;
+  variant?: string;
+  className?: string;
+  children?: React.ReactNode;
+  disabled?: boolean;
+}
+
+interface CloudflareResponse {
+  uploadURL: string;
+  id: string;
+}
+
+interface UploadSuccessResponse {
+  success: boolean;
+  id: string;
+  uploaded: boolean;
+  urls?: {
+    public: string;
+    thumbnail: string;
+    medium: string;
+    large: string;
+    avatar: string;
+  };
+}
+
+export function UppyPhotoUpload({
+  onUploadComplete,
+  onUploadStart,
+  onUploadError,
+  maxFiles = 5,
+  maxSizeMB = 10,
+  allowedFileTypes = ['image/*'],
+  metadata = {},
+  variant = 'public',
+  className = '',
+  children,
+  disabled = false,
+}: UppyPhotoUploadProps) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [uploadedImages, setUploadedImages] = useState<string[]>([]);
+  const uppyRef = useRef<Uppy | null>(null);
+  const { toast } = useToast();
+
+  useEffect(() => {
+    // Initialize Uppy
+    const uppy = new Uppy({
+      restrictions: {
+        maxNumberOfFiles: maxFiles,
+        allowedFileTypes,
+        maxFileSize: maxSizeMB * 1024 * 1024,
+      },
+      autoProceed: false,
+    });
+
+    // Add Dashboard plugin
+    uppy.use(Dashboard, {
+      inline: false,
+      trigger: null,
+      hideProgressDetails: false,
+      proudlyDisplayPoweredByUppy: false,
+      showRemoveButtonAfterComplete: true,
+      showSelectedFiles: true,
+      note: `Images up to ${maxSizeMB}MB, max ${maxFiles} files`,
+    });
+
+    // Add Image Editor plugin
+    uppy.use(ImageEditor, {
+      quality: 0.8,
+    });
+
+    // Add XHR Upload plugin (configured per file in beforeUpload)
+    uppy.use(XHRUpload, {
+      endpoint: '', // Will be set dynamically
+      method: 'POST',
+      formData: true,
+      bundle: false,
+    });
+
+    // Before upload hook - fetch upload URL for each file
+    uppy.on('files-added', async (files) => {
+      if (disabled) {
+        uppy.cancelAll();
+        return;
+      }
+
+      onUploadStart?.();
+
+      // Process each file to get upload URL
+      for (const file of files) {
+        try {
+          const response = await supabase.functions.invoke('upload-image', {
+            body: { metadata, variant },
+          });
+
+          if (response.error) {
+            throw new Error(response.error.message);
+          }
+
+          const result: CloudflareResponse = response.data;
+          
+          // Store Cloudflare ID in file meta
+          uppy.setFileMeta(file.id, {
+            ...file.meta,
+            cloudflareId: result.id,
+          });
+
+          // Configure XHR upload endpoint for this file
+          const xhrPlugin = uppy.getPlugin('XHRUpload') as any;
+          if (xhrPlugin) {
+            xhrPlugin.setOptions({
+              endpoint: result.uploadURL,
+            });
+          }
+        } catch (error) {
+          console.error('Failed to get upload URL:', error);
+          uppy.removeFile(file.id);
+          toast({
+            variant: 'destructive',
+            title: 'Upload Error',
+            description: `Failed to prepare upload for ${file.name}`,
+          });
+          onUploadError?.(error as Error);
+        }
+      }
+    });
+
+    // Handle upload success
+    uppy.on('upload-success', async (file, response) => {
+      try {
+        const cloudflareId = file?.meta?.cloudflareId as string;
+        if (!cloudflareId) {
+          throw new Error('Missing Cloudflare ID');
+        }
+
+        // Poll for upload completion
+        let attempts = 0;
+        const maxAttempts = 30; // 30 seconds max
+        let imageData: UploadSuccessResponse | null = null;
+
+        while (attempts < maxAttempts) {
+          const statusResponse = await supabase.functions.invoke('upload-image', {
+            body: null,
+            method: 'GET',
+          });
+
+          if (!statusResponse.error && statusResponse.data) {
+            const status: UploadSuccessResponse = statusResponse.data;
+            if (status.uploaded && status.urls) {
+              imageData = status;
+              break;
+            }
+          }
+
+          await new Promise(resolve => setTimeout(resolve, 1000));
+          attempts++;
+        }
+
+        if (imageData?.urls) {
+          setUploadedImages(prev => [...prev, imageData.urls!.public]);
+        }
+      } catch (error) {
+        console.error('Upload post-processing failed:', error);
+        onUploadError?.(error as Error);
+      }
+    });
+
+    // Handle upload error
+    uppy.on('upload-error', (file, error, response) => {
+      console.error('Upload error:', error);
+      
+      // Check if it's an expired URL error and retry
+      if (error.message?.includes('expired') || response?.status === 400) {
+        toast({
+          title: 'Upload URL Expired',
+          description: 'Retrying upload...',
+        });
+        
+        // Retry the upload by re-adding the file
+        if (file) {
+          uppy.removeFile(file.id);
+          // Re-add the file to trigger new URL fetch
+          uppy.addFile({
+            source: 'retry',
+            name: file.name,
+            type: file.type,
+            data: file.data,
+            meta: { ...file.meta, cloudflareId: undefined },
+          });
+        }
+      } else {
+        toast({
+          variant: 'destructive',
+          title: 'Upload Failed',
+          description: error.message || 'An error occurred during upload',
+        });
+        onUploadError?.(error);
+      }
+    });
+
+    // Handle upload complete
+    uppy.on('complete', (result) => {
+      if (result.successful.length > 0) {
+        onUploadComplete?.(uploadedImages);
+        toast({
+          title: 'Upload Complete',
+          description: `Successfully uploaded ${result.successful.length} image(s)`,
+        });
+      }
+      setIsModalOpen(false);
+    });
+
+    uppyRef.current = uppy;
+
+    return () => {
+      uppy.destroy();
+    };
+  }, [maxFiles, maxSizeMB, allowedFileTypes, metadata, variant, disabled, onUploadStart, onUploadComplete, onUploadError, toast, uploadedImages]);
+
+  const handleOpenModal = () => {
+    if (!disabled) {
+      setIsModalOpen(true);
+    }
+  };
+
+  return (
+    <>
+      <div className={className}>
+        {children ? (
+          <div onClick={handleOpenModal} className="cursor-pointer">
+            {children}
+          </div>
+        ) : (
+          <Button
+            onClick={handleOpenModal}
+            disabled={disabled}
+            variant="outline"
+            className="w-full"
+          >
+            <Upload className="mr-2 h-4 w-4" />
+            Upload Photos
+          </Button>
+        )}
+      </div>
+
+      {uppyRef.current && (
+        <DashboardModal
+          uppy={uppyRef.current}
+          open={isModalOpen}
+          onRequestClose={() => setIsModalOpen(false)}
+          closeModalOnClickOutside
+          animateOpenClose
+          browserBackButtonClose
+        />
+      )}
+
+      {uploadedImages.length > 0 && (
+        <div className="mt-4 grid grid-cols-2 sm:grid-cols-3 gap-2">
+          {uploadedImages.map((url, index) => (
+            <div key={index} className="relative aspect-square rounded-lg overflow-hidden bg-muted">
+              <img
+                src={url}
+                alt={`Uploaded ${index + 1}`}
+                className="w-full h-full object-cover"
+              />
+              <div className="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors" />
+            </div>
+          ))}
+        </div>
+      )}
+    </>
+  );
+}

supabase/functions/upload-image/index.ts

@@ -1,4 +1,5 @@
 import { serve } from "https://deno.land/std@0.168.0/http/server.ts"
+import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
 
 const corsHeaders = {
   'Access-Control-Allow-Origin': '*',
@@ -22,6 +23,37 @@ serve(async (req) => {
     }
 
     if (req.method === 'DELETE') {
+      // Require authentication for DELETE operations
+      const authHeader = req.headers.get('Authorization')
+      if (!authHeader) {
+        return new Response(
+          JSON.stringify({ error: 'Authentication required for delete operations' }),
+          { 
+            status: 401, 
+            headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
+          }
+        )
+      }
+
+      // Verify JWT token
+      const supabaseUrl = Deno.env.get('SUPABASE_URL')!
+      const supabaseAnonKey = Deno.env.get('SUPABASE_ANON_KEY')!
+      const supabase = createClient(supabaseUrl, supabaseAnonKey, {
+        global: { headers: { Authorization: authHeader } }
+      })
+
+      const { data: { user }, error: authError } = await supabase.auth.getUser()
+      if (authError || !user) {
+        console.error('Auth verification failed:', authError)
+        return new Response(
+          JSON.stringify({ error: 'Invalid authentication' }),
+          { 
+            status: 401, 
+            headers: { ...corsHeaders, 'Content-Type': 'application/json' } 
+          }
+        )
+      }
+
       // Delete image from Cloudflare
       const { imageId } = await req.json()
       
@@ -71,11 +103,16 @@ serve(async (req) => {
 
     if (req.method === 'POST') {
       // Request a direct upload URL from Cloudflare
-      const { metadata = {}, variant = 'public' } = await req.json().catch(() => ({}))
+      const { metadata = {}, variant = 'public', requireSignedURLs = false } = await req.json().catch(() => ({}))
 
       // Create FormData for the request (Cloudflare API requires multipart/form-data)
       const formData = new FormData()
-      formData.append('requireSignedURLs', 'false')
+      formData.append('requireSignedURLs', requireSignedURLs.toString())
+      
+      // Add metadata to the request if provided
+      if (metadata && Object.keys(metadata).length > 0) {
+        formData.append('metadata', JSON.stringify(metadata))
+      }
 
       const directUploadResponse = await fetch(
         `https://api.cloudflare.com/client/v4/accounts/${CLOUDFLARE_ACCOUNT_ID}/images/v2/direct_upload`,