Fix photo upload functionality

- Use proper API instance with authentication headers
- Fix API URL to use backend port (3001) instead of frontend
- Add upload progress tracking
- Add success/error toast notifications
- Show progress bar with percentage during upload

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<PhotoUploadProps> = ({ eventId, onUploadCompl
     formData.append('type', photoType);
 
     try {
-      const response = await fetch(`/api/admin/events/${eventId}/upload`, {
+      const response = await api.post(`/api/admin/events/${eventId}/upload`, formData, {
-        method: 'POST',
+        headers: {
-        body: formData,
+          'Content-Type': 'multipart/form-data',
-        credentials: 'include',
+        },
+        onUploadProgress: (progressEvent) => {
+          if (progressEvent.total) {
+            const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+            setUploadProgress(progress);
+          }
+        },
       });
 
-      if (!response.ok) {
+      console.log('Upload result:', response.data);
-        throw new Error('Upload failed');
-      }
-
-      const result = await response.json();
-      console.log('Upload result:', result);
 
       // Clear selected files
       setSelectedFiles([]);
@@ -59,12 +62,16 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ 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,13 +192,19 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
       </div>
 
       {/* Progress Bar */}
-      {isUploading && uploadProgress > 0 && (
+      {isUploading && (
+        <div className="mt-4">
+          <div className="flex justify-between text-sm text-neutral-600 mb-1">
+            <span>Uploading...</span>
+            <span>{uploadProgress}%</span>
+          </div>
           <div className="w-full bg-neutral-200 rounded-full h-2">
             <div
               className="bg-primary-600 h-2 rounded-full transition-all duration-300"
               style={{ width: `${uploadProgress}%` }}
             />
           </div>
+        </div>
       )}
     </div>
   );