diff --git a/src/components/upload/PhotoSubmissionUpload.tsx b/src/components/upload/PhotoSubmissionUpload.tsx index 492aeaa1..16d3a95f 100644 --- a/src/components/upload/PhotoSubmissionUpload.tsx +++ b/src/components/upload/PhotoSubmissionUpload.tsx @@ -43,48 +43,73 @@ export function PhotoSubmissionUpload({ onSubmissionComplete, parkId, rideId }: }; 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, - }), - }); + try { + // Get upload URL from Supabase edge function + const { data: uploadData, error: uploadError } = await supabase.functions.invoke('upload-image', { + method: 'POST', + }); - if (uploadError || !uploadData?.uploadURL) { - throw new Error('Failed to get upload URL'); + if (uploadError || !uploadData?.uploadURL) { + console.error('Failed to get upload URL:', uploadError); + 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) { + const errorText = await uploadResponse.text(); + console.error('Cloudflare upload failed:', errorText); + throw new Error('Failed to upload file to Cloudflare'); + } + + const result = await uploadResponse.json(); + const imageId = result.result?.id; + + if (!imageId) { + console.error('No image ID returned from Cloudflare:', result); + throw new Error('Invalid response from Cloudflare'); + } + + // Get the delivery URL using the edge function with URL parameters + const getImageUrl = new URL(`https://ydvtmnrszybqnbcqbdcy.supabase.co/functions/v1/upload-image`); + getImageUrl.searchParams.set('id', imageId); + + const response = await fetch(getImageUrl.toString(), { + method: 'GET', + headers: { + 'Authorization': `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InlkdnRtbnJzenlicW5iY3FiZGN5Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTgzMjYzNTYsImV4cCI6MjA3MzkwMjM1Nn0.DM3oyapd_omP5ZzIlrT0H9qBsiQBxBRgw2tYuqgXKX4`, + 'apikey': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InlkdnRtbnJzenlicW5iY3FiZGN5Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTgzMjYzNTYsImV4cCI6MjA3MzkwMjM1Nn0.DM3oyapd_omP5ZzIlrT0H9qBsiQBxBRgw2tYuqgXKX4', + }, + }); + + if (!response.ok) { + const errorText = await response.text(); + console.error('Failed to get image status:', errorText); + throw new Error('Failed to get image URL'); + } + + const statusData = await response.json(); + + if (!statusData?.urls?.original) { + console.error('No image URL returned:', statusData); + throw new Error('No image URL available'); + } + + return { + id: imageId, + url: statusData.urls.original, + }; + } catch (error) { + console.error('Upload error:', error); + throw error; } - - // 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 () => {