feat: Implement Uppy photo upload

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>
+      )}
+    </>
+  );
+}