Fix photo upload issues and improve readiness

src/components/upload/UppyPhotoUpload.tsx

@@ -70,6 +70,7 @@ export function UppyPhotoUpload({
   const [isUploading, setIsUploading] = useState(false);
   const [uploadProgress, setUploadProgress] = useState(0);
   const uppyRef = useRef<Uppy | null>(null);
+  const uploadedImagesRef = useRef<string[]>([]);
   const { toast } = useToast();
 
   useEffect(() => {
@@ -81,6 +82,7 @@ export function UppyPhotoUpload({
         maxFileSize: maxSizeMB * 1024 * 1024,
       },
       autoProceed: false,
+      allowMultipleUploadBatches: true,
     });
 
     // Add Dashboard plugin
@@ -203,7 +205,9 @@ export function UppyPhotoUpload({
       }
 
       if (imageData?.urls) {
-        setUploadedImages(prev => [...prev, imageData.urls!.public]);
+        const newUrl = imageData.urls.public;
+        uploadedImagesRef.current = [...uploadedImagesRef.current, newUrl];
+        setUploadedImages(prev => [...prev, newUrl]);
       }
     } catch (error) {
       console.error('Upload post-processing failed:', error);
@@ -251,11 +255,15 @@ export function UppyPhotoUpload({
       setUploadProgress(0);
       
       if (result.successful.length > 0) {
-        onUploadComplete?.(uploadedImages);
+        // Use ref to get current uploaded images
+        onUploadComplete?.(uploadedImagesRef.current);
         toast({
           title: 'Upload Complete',
           description: `Successfully uploaded ${result.successful.length} image(s)`,
         });
+        
+        // Clear Uppy's file list for next batch
+        uppy.cancelAll();
       }
       setIsModalOpen(false);
     });
@@ -265,24 +273,48 @@ export function UppyPhotoUpload({
     return () => {
       uppy.destroy();
     };
-  }, [maxFiles, maxSizeMB, allowedFileTypes, metadata, variant, disabled, onUploadStart, onUploadComplete, onUploadError, toast, uploadedImages, size]);
+  }, [maxFiles, maxSizeMB, allowedFileTypes, metadata, variant, disabled, onUploadStart, onUploadComplete, onUploadError, toast, size]);
 
   const handleDragDropFiles = async (files: File[]) => {
     if (!uppyRef.current || disabled) return;
 
-    // Add files to Uppy and start upload
+    try {
+      // Add files to Uppy
       files.forEach((file) => {
+        try {
           uppyRef.current?.addFile({
             source: 'drag-drop',
             name: file.name,
             type: file.type,
             data: file,
           });
+        } catch (error: any) {
+          // Handle duplicate file error gracefully
+          if (error.message?.includes('duplicate')) {
+            console.log(`Skipping duplicate file: ${file.name}`);
+          } else {
+            throw error;
+          }
+        }
       });
+      
+      // Auto-start upload after adding files
+      if (uppyRef.current.getFiles().length > 0) {
+        uppyRef.current.upload();
+      }
+    } catch (error) {
+      console.error('Error adding files:', error);
+      toast({
+        variant: 'destructive',
+        title: 'Error',
+        description: 'Failed to add files for upload',
+      });
+    }
   };
 
   const removeImage = (index: number) => {
     const newUrls = uploadedImages.filter((_, i) => i !== index);
+    uploadedImagesRef.current = newUrls;
     setUploadedImages(newUrls);
     if (onUploadComplete) {
       onUploadComplete(newUrls);
@@ -390,14 +422,11 @@ export function UppyPhotoUpload({
       return (
         <div className="space-y-4">
           <DragDropZone
-            onFilesAdded={(files) => {
+            onFilesAdded={handleDragDropFiles}
-              handleDragDropFiles(files);
-              handleOpenModal();
-            }}
             maxFiles={maxFiles}
             maxSizeMB={maxSizeMB}
             allowedFileTypes={allowedFileTypes}
-            disabled={disabled}
+            disabled={disabled || isUploading}
             className="min-h-[200px]"
           />
           {renderPreview()}