pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-23 12:31:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix avatar upload and display issues

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-28 16:09:09 +00:00
parent 0a46ccc44a
commit 439e9388ab
1 changed files with 27 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/upload/PhotoUpload.tsx
View File

@@ -52,8 +52,9 @@ export function PhotoUpload({
const isAvatar = variant === 'avatar'; const isAvatar = variant === 'avatar';
const isCompact = variant === 'compact'; const isCompact = variant === 'compact';
const actualMaxFiles = isAvatar ? 1 : maxFiles;
const totalImages = uploadedImages.length + existingPhotos.length; const totalImages = uploadedImages.length + existingPhotos.length;
const canUploadMore = totalImages < maxFiles; const canUploadMore = totalImages < actualMaxFiles;
const validateFile = (file: File): string | null => { const validateFile = (file: File): string | null => {
// Check file size (10MB limit) // Check file size (10MB limit)
@@ -144,13 +145,13 @@ export function PhotoUpload({
}; };
const handleFiles = async (files: FileList) => { const handleFiles = async (files: FileList) => {
if (!canUploadMore) { if (!isAvatar && !canUploadMore) {
setError(`Maximum ${maxFiles} ${maxFiles === 1 ? 'image' : 'images'} allowed`); setError(`Maximum ${actualMaxFiles} ${actualMaxFiles === 1 ? 'image' : 'images'} allowed`);
onError?.(`Maximum ${maxFiles} ${maxFiles === 1 ? 'image' : 'images'} allowed`); onError?.(`Maximum ${actualMaxFiles} ${actualMaxFiles === 1 ? 'image' : 'images'} allowed`);
return; 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 // Validate all files first
for (const file of filesToUpload) { for (const file of filesToUpload) {
@@ -173,11 +174,17 @@ export function PhotoUpload({
}); });
const results = await Promise.all(uploadPromises); const results = await Promise.all(uploadPromises);
setUploadedImages(prev => [...prev, ...results]);
// Call completion callback with all image URLs 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)]; const allUrls = [...existingPhotos, ...uploadedImages.map(img => img.url), ...results.map(img => img.url)];
onUploadComplete?.(allUrls); onUploadComplete?.(allUrls);
}
setUploadProgress(100); setUploadProgress(100);
} catch (error: any) { } catch (error: any) {
@@ -210,7 +217,7 @@ export function PhotoUpload({
e.preventDefault(); e.preventDefault();
setDragOver(false); setDragOver(false);
if (!canUploadMore || uploading) return; if (!(isAvatar || canUploadMore) || uploading) return;
const files = e.dataTransfer.files; const files = e.dataTransfer.files;
if (files.length > 0) { if (files.length > 0) {
@@ -307,13 +314,13 @@ export function PhotoUpload({
className={cn( className={cn(
'border-2 border-dashed transition-colors cursor-pointer', 'border-2 border-dashed transition-colors cursor-pointer',
dragOver && 'border-primary bg-primary/5', dragOver && 'border-primary bg-primary/5',
!canUploadMore && 'opacity-50 cursor-not-allowed', !(isAvatar || canUploadMore) && 'opacity-50 cursor-not-allowed',
isCompact && 'p-2' isCompact && 'p-2'
)} )}
onDragOver={handleDragOver} onDragOver={handleDragOver}
onDragLeave={handleDragLeave} onDragLeave={handleDragLeave}
onDrop={handleDrop} onDrop={handleDrop}
onClick={canUploadMore && !uploading ? triggerFileSelect : undefined} onClick={isAvatar || (canUploadMore && !uploading) ? triggerFileSelect : undefined}
> >
<CardContent className={cn('p-8 text-center', isCompact && 'p-4')}> <CardContent className={cn('p-8 text-center', isCompact && 'p-4')}>
{uploading ? ( {uploading ? (
@@ -338,20 +345,22 @@ export function PhotoUpload({
<div className="space-y-2"> <div className="space-y-2">
<p className="text-lg font-medium"> <p className="text-lg font-medium">
{canUploadMore ? 'Upload Photos' : 'Maximum Photos Reached'} {isAvatar ? 'Upload Avatar' : canUploadMore ? 'Upload Photos' : 'Maximum Photos Reached'}
</p> </p>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{canUploadMore ? ( {isAvatar ? (
<>Drag & drop or click to browse<br />JPEG, PNG, WebP up to 10MB</>
) : canUploadMore ? (
<>Drag & drop or click to browse<br />JPEG, PNG, WebP up to 10MB each</> <>Drag & drop or click to browse<br />JPEG, PNG, WebP up to 10MB each</>
) : ( ) : (
`Maximum ${maxFiles} ${maxFiles === 1 ? 'photo' : 'photos'} allowed` `Maximum ${actualMaxFiles} ${actualMaxFiles === 1 ? 'photo' : 'photos'} allowed`
)} )}
</p> </p>
</div> </div>
{canUploadMore && ( {!isAvatar && canUploadMore && (
<Badge variant="outline"> <Badge variant="outline">
{totalImages}/{maxFiles} {maxFiles === 1 ? 'photo' : 'photos'} {totalImages}/{actualMaxFiles} {actualMaxFiles === 1 ? 'photo' : 'photos'}
</Badge> </Badge>
)} )}
</div> </div>
@@ -366,7 +375,7 @@ export function PhotoUpload({
multiple={maxFiles > 1} multiple={maxFiles > 1}
onChange={handleFileSelect} onChange={handleFileSelect}
className="hidden" className="hidden"
disabled={!canUploadMore || uploading} disabled={!(isAvatar || canUploadMore) || uploading}
/> />
{/* Error Display */} {/* Error Display */}