mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-23 04:51:13 -05:00
Add photo upload functionality
This commit is contained in:
gpt-engineer-app[bot]
384
src/components/upload/PhotoUpload.tsx
Normal file
384
src/components/upload/PhotoUpload.tsx
Normal file
@@ -0,0 +1,384 @@
|
||||
import { useState, useRef, useCallback } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import {
|
||||
Upload,
|
||||
X,
|
||||
Image as ImageIcon,
|
||||
AlertCircle,
|
||||
Camera,
|
||||
FileImage
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { supabase } from '@/integrations/supabase/client';
|
||||
|
||||
interface PhotoUploadProps {
|
||||
onUploadComplete?: (urls: string[]) => void;
|
||||
onUploadStart?: () => void;
|
||||
onError?: (error: string) => void;
|
||||
maxFiles?: number;
|
||||
existingPhotos?: string[];
|
||||
className?: string;
|
||||
variant?: 'default' | 'compact' | 'avatar';
|
||||
accept?: string;
|
||||
}
|
||||
|
||||
interface UploadedImage {
|
||||
id: string;
|
||||
url: string;
|
||||
filename: string;
|
||||
thumbnailUrl: string;
|
||||
}
|
||||
|
||||
export function PhotoUpload({
|
||||
onUploadComplete,
|
||||
onUploadStart,
|
||||
onError,
|
||||
maxFiles = 5,
|
||||
existingPhotos = [],
|
||||
className,
|
||||
variant = 'default',
|
||||
accept = 'image/jpeg,image/png,image/webp'
|
||||
}: PhotoUploadProps) {
|
||||
const [uploadedImages, setUploadedImages] = useState<UploadedImage[]>([]);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [uploadProgress, setUploadProgress] = useState(0);
|
||||
const [dragOver, setDragOver] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const isAvatar = variant === 'avatar';
|
||||
const isCompact = variant === 'compact';
|
||||
const totalImages = uploadedImages.length + existingPhotos.length;
|
||||
const canUploadMore = totalImages < maxFiles;
|
||||
|
||||
const validateFile = (file: File): string | null => {
|
||||
// Check file size (10MB limit)
|
||||
const maxSize = 10 * 1024 * 1024;
|
||||
if (file.size > maxSize) {
|
||||
return 'File size must be less than 10MB';
|
||||
}
|
||||
|
||||
// Check file type
|
||||
const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];
|
||||
if (!allowedTypes.includes(file.type)) {
|
||||
return 'Only JPEG, PNG, and WebP images are allowed';
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const uploadFile = async (file: File): Promise<UploadedImage> => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('metadata', JSON.stringify({
|
||||
filename: file.name,
|
||||
size: file.size,
|
||||
type: file.type,
|
||||
uploadedAt: new Date().toISOString()
|
||||
}));
|
||||
|
||||
const { data, error } = await supabase.functions.invoke('upload-image', {
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw new Error(error.message || 'Upload failed');
|
||||
}
|
||||
|
||||
if (!data.success) {
|
||||
throw new Error(data.error || 'Upload failed');
|
||||
}
|
||||
|
||||
return {
|
||||
id: data.id,
|
||||
url: data.urls.original,
|
||||
filename: data.filename,
|
||||
thumbnailUrl: data.urls.thumbnail
|
||||
};
|
||||
};
|
||||
|
||||
const handleFiles = async (files: FileList) => {
|
||||
if (!canUploadMore) {
|
||||
setError(`Maximum ${maxFiles} ${maxFiles === 1 ? 'image' : 'images'} allowed`);
|
||||
onError?.(`Maximum ${maxFiles} ${maxFiles === 1 ? 'image' : 'images'} allowed`);
|
||||
return;
|
||||
}
|
||||
|
||||
const filesToUpload = Array.from(files).slice(0, maxFiles - totalImages);
|
||||
|
||||
// Validate all files first
|
||||
for (const file of filesToUpload) {
|
||||
const validationError = validateFile(file);
|
||||
if (validationError) {
|
||||
setError(validationError);
|
||||
onError?.(validationError);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setUploading(true);
|
||||
setError(null);
|
||||
onUploadStart?.();
|
||||
|
||||
try {
|
||||
const uploadPromises = filesToUpload.map(async (file, index) => {
|
||||
setUploadProgress((index / filesToUpload.length) * 100);
|
||||
return uploadFile(file);
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
setUploadProgress(100);
|
||||
} catch (error: any) {
|
||||
const errorMessage = error.message || 'Upload failed';
|
||||
setError(errorMessage);
|
||||
onError?.(errorMessage);
|
||||
} finally {
|
||||
setUploading(false);
|
||||
setUploadProgress(0);
|
||||
}
|
||||
};
|
||||
|
||||
const removeImage = (imageId: string) => {
|
||||
setUploadedImages(prev => prev.filter(img => img.id !== imageId));
|
||||
const updatedUrls = [...existingPhotos, ...uploadedImages.filter(img => img.id !== imageId).map(img => img.url)];
|
||||
onUploadComplete?.(updatedUrls);
|
||||
};
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setDragOver(true);
|
||||
}, []);
|
||||
|
||||
const handleDragLeave = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setDragOver(false);
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setDragOver(false);
|
||||
|
||||
if (!canUploadMore || uploading) return;
|
||||
|
||||
const files = e.dataTransfer.files;
|
||||
if (files.length > 0) {
|
||||
handleFiles(files);
|
||||
}
|
||||
}, [canUploadMore, uploading]);
|
||||
|
||||
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = e.target.files;
|
||||
if (files && files.length > 0) {
|
||||
handleFiles(files);
|
||||
}
|
||||
};
|
||||
|
||||
const triggerFileSelect = () => {
|
||||
fileInputRef.current?.click();
|
||||
};
|
||||
|
||||
if (isAvatar) {
|
||||
return (
|
||||
<div className={cn('space-y-4', className)}>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative">
|
||||
{uploadedImages.length > 0 ? (
|
||||
<img
|
||||
src={uploadedImages[0].thumbnailUrl}
|
||||
alt="Avatar"
|
||||
className="w-24 h-24 rounded-full object-cover border-2 border-border"
|
||||
/>
|
||||
) : existingPhotos.length > 0 ? (
|
||||
<img
|
||||
src={existingPhotos[0]}
|
||||
alt="Avatar"
|
||||
className="w-24 h-24 rounded-full object-cover border-2 border-border"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-24 h-24 rounded-full bg-muted border-2 border-border flex items-center justify-center">
|
||||
<Camera className="w-8 h-8 text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{uploading && (
|
||||
<div className="absolute inset-0 bg-background/80 rounded-full flex items-center justify-center">
|
||||
<Progress value={uploadProgress} className="w-16" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Button
|
||||
onClick={triggerFileSelect}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={uploading}
|
||||
>
|
||||
<Upload className="w-4 h-4 mr-2" />
|
||||
{uploadedImages.length > 0 || existingPhotos.length > 0 ? 'Change Avatar' : 'Upload Avatar'}
|
||||
</Button>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
JPEG, PNG, WebP up to 10MB
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept={accept}
|
||||
onChange={handleFileSelect}
|
||||
className="hidden"
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn('space-y-4', className)}>
|
||||
{/* Upload Area */}
|
||||
<Card
|
||||
className={cn(
|
||||
'border-2 border-dashed transition-colors cursor-pointer',
|
||||
dragOver && 'border-primary bg-primary/5',
|
||||
!canUploadMore && 'opacity-50 cursor-not-allowed',
|
||||
isCompact && 'p-2'
|
||||
)}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
onClick={canUploadMore && !uploading ? triggerFileSelect : undefined}
|
||||
>
|
||||
<CardContent className={cn('p-8 text-center', isCompact && 'p-4')}>
|
||||
{uploading ? (
|
||||
<div className="space-y-4">
|
||||
<div className="animate-pulse">
|
||||
<Upload className="w-8 h-8 text-primary mx-auto" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium">Uploading...</p>
|
||||
<Progress value={uploadProgress} className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-center">
|
||||
{dragOver ? (
|
||||
<FileImage className="w-12 h-12 text-primary" />
|
||||
) : (
|
||||
<ImageIcon className="w-12 h-12 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-lg font-medium">
|
||||
{canUploadMore ? 'Upload Photos' : 'Maximum Photos Reached'}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{canUploadMore ? (
|
||||
<>Drag & drop or click to browse<br />JPEG, PNG, WebP up to 10MB each</>
|
||||
) : (
|
||||
`Maximum ${maxFiles} ${maxFiles === 1 ? 'photo' : 'photos'} allowed`
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{canUploadMore && (
|
||||
<Badge variant="outline">
|
||||
{totalImages}/{maxFiles} {maxFiles === 1 ? 'photo' : 'photos'}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept={accept}
|
||||
multiple={maxFiles > 1}
|
||||
onChange={handleFileSelect}
|
||||
className="hidden"
|
||||
disabled={!canUploadMore || uploading}
|
||||
/>
|
||||
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Uploaded Images Preview */}
|
||||
{uploadedImages.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<h4 className="text-sm font-medium">Uploaded Photos</h4>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{uploadedImages.map((image) => (
|
||||
<div key={image.id} className="relative group">
|
||||
<img
|
||||
src={image.thumbnailUrl}
|
||||
alt={image.filename}
|
||||
className="w-full aspect-square object-cover rounded-lg border"
|
||||
/>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="icon"
|
||||
className="absolute -top-2 -right-2 w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
onClick={() => removeImage(image.id)}
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</Button>
|
||||
<div className="absolute bottom-2 left-2 right-2">
|
||||
<Badge variant="secondary" className="text-xs truncate">
|
||||
{image.filename}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Existing Photos Display */}
|
||||
{existingPhotos.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<h4 className="text-sm font-medium">Existing Photos</h4>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{existingPhotos.map((url, index) => (
|
||||
<div key={index} className="relative">
|
||||
<img
|
||||
src={url}
|
||||
alt={`Existing photo ${index + 1}`}
|
||||
className="w-full aspect-square object-cover rounded-lg border"
|
||||
/>
|
||||
<Badge variant="outline" className="absolute bottom-2 left-2 text-xs">
|
||||
Existing
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user