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

Refactor: Limit avatar upload size

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-29 02:39:47 +00:00
parent 87a33ca5b1
commit 8378c345d1
3 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/settings/AccountProfileTab.tsx
View File

@@ -154,6 +154,7 @@ export function AccountProfileTab() {
<PhotoUpload <PhotoUpload
variant="avatar" variant="avatar"
maxFiles={1} maxFiles={1}
maxSizeMB={1}
existingPhotos={avatarUrl ? [avatarUrl] : []} existingPhotos={avatarUrl ? [avatarUrl] : []}
onUploadComplete={handleAvatarUpload} onUploadComplete={handleAvatarUpload}
currentImageId={avatarImageId} currentImageId={avatarImageId}

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

@@ -25,6 +25,7 @@ interface PhotoUploadProps {
variant?: 'default' | 'compact' | 'avatar'; variant?: 'default' | 'compact' | 'avatar';
accept?: string; accept?: string;
currentImageId?: string; // For cleanup of existing image currentImageId?: string; // For cleanup of existing image
maxSizeMB?: number; // Custom max file size in MB
} }
interface UploadedImage { interface UploadedImage {
@@ -43,7 +44,8 @@ export function PhotoUpload({
className, className,
variant = 'default', variant = 'default',
accept = 'image/jpeg,image/png,image/webp', accept = 'image/jpeg,image/png,image/webp',
currentImageId currentImageId,
maxSizeMB = 10 // Default 10MB, but can be overridden
}: PhotoUploadProps) { }: PhotoUploadProps) {
const [uploadedImages, setUploadedImages] = useState<UploadedImage[]>([]); const [uploadedImages, setUploadedImages] = useState<UploadedImage[]>([]);
const [uploading, setUploading] = useState(false); const [uploading, setUploading] = useState(false);
@@ -59,10 +61,10 @@ export function PhotoUpload({
const canUploadMore = totalImages < actualMaxFiles; const canUploadMore = totalImages < actualMaxFiles;
const validateFile = (file: File): string | null => { const validateFile = (file: File): string | null => {
// Check file size (10MB limit) // Check file size using configurable limit
const maxSize = 10 * 1024 * 1024; const maxSize = maxSizeMB * 1024 * 1024;
if (file.size > maxSize) { if (file.size > maxSize) {
return 'File size must be less than 10MB'; return `File size must be less than ${maxSizeMB}MB`;
} }
// Check file type // Check file type
@@ -307,7 +309,7 @@ export function PhotoUpload({
{uploadedImages.length > 0 || existingPhotos.length > 0 ? 'Change Avatar' : 'Upload Avatar'} {uploadedImages.length > 0 || existingPhotos.length > 0 ? 'Change Avatar' : 'Upload Avatar'}
</Button> </Button>
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
JPEG, PNG, WebP up to 10MB JPEG, PNG, WebP up to {maxSizeMB}MB
</p> </p>
</div> </div>
</div> </div>
@@ -372,9 +374,9 @@ export function PhotoUpload({
</p> </p>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{isAvatar ? ( {isAvatar ? (
<>Drag & drop or click to browse<br />JPEG, PNG, WebP up to 10MB</> <>Drag & drop or click to browse<br />JPEG, PNG, WebP up to {maxSizeMB}MB</>
) : canUploadMore ? ( ) : 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 {maxSizeMB}MB each</>
) : ( ) : (
`Maximum ${actualMaxFiles} ${actualMaxFiles === 1 ? 'photo' : 'photos'} allowed` `Maximum ${actualMaxFiles} ${actualMaxFiles === 1 ? 'photo' : 'photos'} allowed`
)} )}

2
src/pages/Profile.tsx
View File

@@ -349,7 +349,7 @@ export default function Profile() {
<CardContent className="p-8"> <CardContent className="p-8">
<div className="flex flex-col md:flex-row gap-6"> <div className="flex flex-col md:flex-row gap-6">
<div className="flex flex-col items-center md:items-start"> <div className="flex flex-col items-center md:items-start">
<PhotoUpload variant="avatar" maxFiles={1} existingPhotos={profile.avatar_url ? [profile.avatar_url] : []} onUploadComplete={handleAvatarUpload} currentImageId={avatarImageId} onError={error => { <PhotoUpload variant="avatar" maxFiles={1} maxSizeMB={1} existingPhotos={profile.avatar_url ? [profile.avatar_url] : []} onUploadComplete={handleAvatarUpload} currentImageId={avatarImageId} onError={error => {
toast({ toast({
title: "Upload Error", title: "Upload Error",
description: error, description: error,