diff --git a/server/FILE_UPLOAD_IMPLEMENTATION.md b/server/FILE_UPLOAD_IMPLEMENTATION.md index 21cb097..1ecdb4b 100644 --- a/server/FILE_UPLOAD_IMPLEMENTATION.md +++ b/server/FILE_UPLOAD_IMPLEMENTATION.md @@ -100,14 +100,30 @@ Files are accessible at: `http://localhost:3005/uploads/{filename}` ### 1. Upload Photo +**Important**: The user must be signed in with Clerk to upload photos. The frontend automatically includes the Clerk session token in the Authorization header. + +```typescript +// Frontend usage (with Clerk authentication) +const formData = new FormData(); +formData.append('photo', file); + +// The reportService automatically includes the auth token +const { url, exifData } = await reportService.uploadPhoto(file); +``` + +**Manual API call** (for testing): ```typescript const formData = new FormData(); formData.append('photo', file); +// Get Clerk token (in a Clerk-authenticated component) +const { getToken } = useAuth(); +const token = await getToken(); + const response = await fetch('/api/reports/upload', { method: 'POST', headers: { - 'Authorization': `Bearer ${clerkToken}` + 'Authorization': `Bearer ${token}` }, body: formData }); diff --git a/src/components/report/ReportForm.tsx b/src/components/report/ReportForm.tsx index 71d9ed5..ddc8b21 100644 --- a/src/components/report/ReportForm.tsx +++ b/src/components/report/ReportForm.tsx @@ -1,5 +1,6 @@ import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; +import { useAuth } from '@clerk/clerk-react'; import { PhotoUpload, type PhotoMetadata } from './PhotoUpload'; import { LocationSelector } from './LocationSelector'; import { reportService } from '@/services/reportService'; @@ -56,6 +57,7 @@ const CONCERN_TYPES = [ export function ReportForm() { const navigate = useNavigate(); + const { isSignedIn, isLoaded } = useAuth(); const [currentStep, setCurrentStep] = useState(1); const [formData, setFormData] = useState({ photos: [], @@ -232,6 +234,31 @@ export function ReportForm() { return (
+ {/* Authentication Warning */} + {isLoaded && !isSignedIn && ( +
+
+ + + +
+

Authentication Required

+

+ You must be signed in to submit a report. Please{' '} + + sign in + {' '} + or{' '} + + create an account + {' '} + to continue. +

+
+
+
+ )} + {/* Progress Indicator */}
diff --git a/src/services/reportService.ts b/src/services/reportService.ts index 4650bca..1072525 100644 --- a/src/services/reportService.ts +++ b/src/services/reportService.ts @@ -49,7 +49,17 @@ class ReportService { }); if (!response.ok) { - throw new Error('Failed to upload photo'); + if (response.status === 401) { + throw new Error('You must be signed in to upload photos. Please sign in and try again.'); + } + + // Try to get error details from response + try { + const errorData = await response.json(); + throw new Error(errorData.error?.message || 'Failed to upload photo'); + } catch { + throw new Error('Failed to upload photo'); + } } return response.json();