diff --git a/src/components/upload/UppyPhotoUpload.tsx b/src/components/upload/UppyPhotoUpload.tsx index 52ec3e95..6de53e19 100644 --- a/src/components/upload/UppyPhotoUpload.tsx +++ b/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(null); + const uploadedImagesRef = useRef([]); 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 - files.forEach((file) => { - uppyRef.current?.addFile({ - source: 'drag-drop', - name: file.name, - type: file.type, - data: file, + 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 (
{ - handleDragDropFiles(files); - handleOpenModal(); - }} + onFilesAdded={handleDragDropFiles} maxFiles={maxFiles} maxSizeMB={maxSizeMB} allowedFileTypes={allowedFileTypes} - disabled={disabled} + disabled={disabled || isUploading} className="min-h-[200px]" /> {renderPreview()}