diff --git a/frontend/src/components/admin/PhotoUpload.tsx b/frontend/src/components/admin/PhotoUpload.tsx index 51eb65e..1283278 100644 --- a/frontend/src/components/admin/PhotoUpload.tsx +++ b/frontend/src/components/admin/PhotoUpload.tsx @@ -2,6 +2,8 @@ import React, { useState, useRef } from 'react'; import { Upload, X, Image, Loader2 } from 'lucide-react'; import { Button } from '../common'; import { clsx } from 'clsx'; +import { api } from '../../config/api'; +import { toast } from 'react-toastify'; interface PhotoUploadProps { eventId: number; @@ -40,18 +42,19 @@ export const PhotoUpload: React.FC = ({ eventId, onUploadCompl formData.append('type', photoType); try { - const response = await fetch(`/api/admin/events/${eventId}/upload`, { - method: 'POST', - body: formData, - credentials: 'include', + const response = await api.post(`/api/admin/events/${eventId}/upload`, formData, { + headers: { + 'Content-Type': 'multipart/form-data', + }, + onUploadProgress: (progressEvent) => { + if (progressEvent.total) { + const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total); + setUploadProgress(progress); + } + }, }); - if (!response.ok) { - throw new Error('Upload failed'); - } - - const result = await response.json(); - console.log('Upload result:', result); + console.log('Upload result:', response.data); // Clear selected files setSelectedFiles([]); @@ -59,12 +62,16 @@ export const PhotoUpload: React.FC = ({ eventId, onUploadCompl fileInputRef.current.value = ''; } + // Show success message + toast.success(`Successfully uploaded ${selectedFiles.length} photo${selectedFiles.length > 1 ? 's' : ''}`); + // Call callback if (onUploadComplete) { onUploadComplete(); } - } catch (error) { + } catch (error: any) { console.error('Upload error:', error); + toast.error(error.response?.data?.error || 'Failed to upload photos'); } finally { setIsUploading(false); setUploadProgress(0); @@ -185,12 +192,18 @@ export const PhotoUpload: React.FC = ({ eventId, onUploadCompl {/* Progress Bar */} - {isUploading && uploadProgress > 0 && ( -
-
+ {isUploading && ( +
+
+ Uploading... + {uploadProgress}% +
+
+
+
)}