diff --git a/src/components/upload/PhotoSubmissionUpload.tsx b/src/components/upload/PhotoSubmissionUpload.tsx index c7214b46..492aeaa1 100644 --- a/src/components/upload/PhotoSubmissionUpload.tsx +++ b/src/components/upload/PhotoSubmissionUpload.tsx @@ -42,6 +42,51 @@ export function PhotoSubmissionUpload({ onSubmissionComplete, parkId, rideId }: setSelectedFiles(prev => prev.filter((_, i) => i !== index)); }; + const uploadFileToCloudflare = async (file: File): Promise<{ id: string; url: string }> => { + // Get upload URL from Supabase edge function + const { data: uploadData, error: uploadError } = await supabase.functions.invoke('upload-image', { + method: 'POST', + body: JSON.stringify({ + filename: file.name, + contentType: file.type, + }), + }); + + if (uploadError || !uploadData?.uploadURL) { + throw new Error('Failed to get upload URL'); + } + + // Upload file directly to Cloudflare + const formData = new FormData(); + formData.append('file', file); + + const uploadResponse = await fetch(uploadData.uploadURL, { + method: 'POST', + body: formData, + }); + + if (!uploadResponse.ok) { + throw new Error('Failed to upload file to Cloudflare'); + } + + const result = await uploadResponse.json(); + + // Get the delivery URL + const { data: statusData, error: statusError } = await supabase.functions.invoke('upload-image', { + method: 'GET', + body: JSON.stringify({ imageId: result.result.id }), + }); + + if (statusError || !statusData?.url) { + throw new Error('Failed to get image URL'); + } + + return { + id: result.result.id, + url: statusData.url, + }; + }; + const handleSubmit = async () => { if (!user) { toast({ @@ -63,17 +108,17 @@ export function PhotoSubmissionUpload({ onSubmissionComplete, parkId, rideId }: setUploading(true); try { - // Upload files to a temporary location or process them for moderation + // Upload files to Cloudflare Images first const photoSubmissions = await Promise.all( selectedFiles.map(async (file, index) => { - // Create a blob URL for preview - const url = URL.createObjectURL(file); + const uploadResult = await uploadFileToCloudflare(file); return { filename: file.name, size: file.size, type: file.type, - url, // In a real implementation, you'd upload to storage first + url: uploadResult.url, + imageId: uploadResult.id, caption: index === 0 ? caption : '', // Only first image gets the caption }; })