diff --git a/src/components/upload/PhotoUpload.tsx b/src/components/upload/PhotoUpload.tsx index 78a9e282..76873bcb 100644 --- a/src/components/upload/PhotoUpload.tsx +++ b/src/components/upload/PhotoUpload.tsx @@ -52,8 +52,9 @@ export function PhotoUpload({ const isAvatar = variant === 'avatar'; const isCompact = variant === 'compact'; + const actualMaxFiles = isAvatar ? 1 : maxFiles; const totalImages = uploadedImages.length + existingPhotos.length; - const canUploadMore = totalImages < maxFiles; + const canUploadMore = totalImages < actualMaxFiles; const validateFile = (file: File): string | null => { // Check file size (10MB limit) @@ -144,13 +145,13 @@ export function PhotoUpload({ }; const handleFiles = async (files: FileList) => { - if (!canUploadMore) { - setError(`Maximum ${maxFiles} ${maxFiles === 1 ? 'image' : 'images'} allowed`); - onError?.(`Maximum ${maxFiles} ${maxFiles === 1 ? 'image' : 'images'} allowed`); + if (!isAvatar && !canUploadMore) { + setError(`Maximum ${actualMaxFiles} ${actualMaxFiles === 1 ? 'image' : 'images'} allowed`); + onError?.(`Maximum ${actualMaxFiles} ${actualMaxFiles === 1 ? 'image' : 'images'} allowed`); return; } - const filesToUpload = Array.from(files).slice(0, maxFiles - totalImages); + const filesToUpload = isAvatar ? Array.from(files).slice(0, 1) : Array.from(files).slice(0, actualMaxFiles - totalImages); // Validate all files first for (const file of filesToUpload) { @@ -173,11 +174,17 @@ export function PhotoUpload({ }); const results = await Promise.all(uploadPromises); - setUploadedImages(prev => [...prev, ...results]); - // Call completion callback with all image URLs - const allUrls = [...existingPhotos, ...uploadedImages.map(img => img.url), ...results.map(img => img.url)]; - onUploadComplete?.(allUrls); + if (isAvatar) { + // For avatars, replace all existing images + setUploadedImages(results); + onUploadComplete?.(results.map(img => img.url)); + } else { + // For regular uploads, append to existing images + setUploadedImages(prev => [...prev, ...results]); + const allUrls = [...existingPhotos, ...uploadedImages.map(img => img.url), ...results.map(img => img.url)]; + onUploadComplete?.(allUrls); + } setUploadProgress(100); } catch (error: any) { @@ -210,7 +217,7 @@ export function PhotoUpload({ e.preventDefault(); setDragOver(false); - if (!canUploadMore || uploading) return; + if (!(isAvatar || canUploadMore) || uploading) return; const files = e.dataTransfer.files; if (files.length > 0) { @@ -307,13 +314,13 @@ export function PhotoUpload({ className={cn( 'border-2 border-dashed transition-colors cursor-pointer', dragOver && 'border-primary bg-primary/5', - !canUploadMore && 'opacity-50 cursor-not-allowed', + !(isAvatar || canUploadMore) && 'opacity-50 cursor-not-allowed', isCompact && 'p-2' )} onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={handleDrop} - onClick={canUploadMore && !uploading ? triggerFileSelect : undefined} + onClick={isAvatar || (canUploadMore && !uploading) ? triggerFileSelect : undefined} > {uploading ? ( @@ -338,20 +345,22 @@ export function PhotoUpload({

- {canUploadMore ? 'Upload Photos' : 'Maximum Photos Reached'} + {isAvatar ? 'Upload Avatar' : canUploadMore ? 'Upload Photos' : 'Maximum Photos Reached'}

- {canUploadMore ? ( + {isAvatar ? ( + <>Drag & drop or click to browse
JPEG, PNG, WebP up to 10MB + ) : canUploadMore ? ( <>Drag & drop or click to browse
JPEG, PNG, WebP up to 10MB each ) : ( - `Maximum ${maxFiles} ${maxFiles === 1 ? 'photo' : 'photos'} allowed` + `Maximum ${actualMaxFiles} ${actualMaxFiles === 1 ? 'photo' : 'photos'} allowed` )}

- {canUploadMore && ( + {!isAvatar && canUploadMore && ( - {totalImages}/{maxFiles} {maxFiles === 1 ? 'photo' : 'photos'} + {totalImages}/{actualMaxFiles} {actualMaxFiles === 1 ? 'photo' : 'photos'} )} @@ -366,7 +375,7 @@ export function PhotoUpload({ multiple={maxFiles > 1} onChange={handleFileSelect} className="hidden" - disabled={!canUploadMore || uploading} + disabled={!(isAvatar || canUploadMore) || uploading} /> {/* Error Display */}