From cfa0b0da690b331745c8eb8141a54eda6d36618a Mon Sep 17 00:00:00 2001
From: paul <paul-nothaft@hotmail.de>
Date: Mon, 7 Jul 2025 16:35:55 +0200
Subject: [PATCH] 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 | 47 ++++++++++++-------
 1 file changed, 30 insertions(+), 17 deletions(-)

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<PhotoUploadProps> = ({ 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<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,12 +192,18 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
       </div>
 
       {/* Progress Bar */}
-      {isUploading && uploadProgress > 0 && (
-        <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}%` }}
-          />
+      {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>