pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-20 14:31:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix Cloudflare image upload

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-28 17:26:20 +00:00
parent 4ddc10b8eb
commit 47ef042b6f
2 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/upload/PhotoUpload.tsx
View File

@@ -81,7 +81,8 @@ export function PhotoUpload({
size: file.size, size: file.size,
type: file.type, type: file.type,
uploadedAt: new Date().toISOString() uploadedAt: new Date().toISOString()
} },
variant: isAvatar ? 'avatar' : 'public'
} }
}); });
@@ -120,11 +121,14 @@ export function PhotoUpload({
}); });
if (!statusError && statusData?.success && statusData.uploaded && statusData.urls) { if (!statusError && statusData?.success && statusData.uploaded && statusData.urls) {
const imageUrl = isAvatar ? statusData.urls.avatar : statusData.urls.original;
const thumbUrl = isAvatar ? statusData.urls.avatar : statusData.urls.thumbnail;
return { return {
id: statusData.id, id: statusData.id,
url: statusData.urls.original, url: imageUrl,
filename: file.name, filename: file.name,
thumbnailUrl: statusData.urls.thumbnail thumbnailUrl: thumbUrl
}; };
} }

22
supabase/functions/upload-image/index.ts
View File

@@ -14,14 +14,15 @@ serve(async (req) => {
try { try {
const CLOUDFLARE_ACCOUNT_ID = Deno.env.get('CLOUDFLARE_ACCOUNT_ID') const CLOUDFLARE_ACCOUNT_ID = Deno.env.get('CLOUDFLARE_ACCOUNT_ID')
const CLOUDFLARE_IMAGES_API_TOKEN = Deno.env.get('CLOUDFLARE_IMAGES_API_TOKEN') const CLOUDFLARE_IMAGES_API_TOKEN = Deno.env.get('CLOUDFLARE_IMAGES_API_TOKEN')
const CLOUDFLARE_ACCOUNT_HASH = Deno.env.get('CLOUDFLARE_ACCOUNT_HASH')
if (!CLOUDFLARE_ACCOUNT_ID || !CLOUDFLARE_IMAGES_API_TOKEN) { if (!CLOUDFLARE_ACCOUNT_ID || !CLOUDFLARE_IMAGES_API_TOKEN || !CLOUDFLARE_ACCOUNT_HASH) {
throw new Error('Missing Cloudflare credentials') throw new Error('Missing Cloudflare credentials')
} }
if (req.method === 'POST') { if (req.method === 'POST') {
// Request a direct upload URL from Cloudflare // Request a direct upload URL from Cloudflare
const { metadata = {} } = await req.json().catch(() => ({})) const { metadata = {}, variant = 'public' } = await req.json().catch(() => ({}))
// Create FormData for the request (Cloudflare API requires multipart/form-data) // Create FormData for the request (Cloudflare API requires multipart/form-data)
const formData = new FormData() const formData = new FormData()
@@ -109,6 +110,10 @@ serve(async (req) => {
// Return the image details with convenient URLs // Return the image details with convenient URLs
const result = imageResult.result const result = imageResult.result
// Construct proper imagedelivery.net URLs using account hash and image ID
const baseUrl = `https://imagedelivery.net/${CLOUDFLARE_ACCOUNT_HASH}/${result.id}`
return new Response( return new Response(
JSON.stringify({ JSON.stringify({
success: true, success: true,
@@ -116,12 +121,13 @@ serve(async (req) => {
uploaded: result.uploaded, uploaded: result.uploaded,
variants: result.variants, variants: result.variants,
draft: result.draft, draft: result.draft,
// Provide convenient URLs for different sizes if not draft // Provide convenient URLs using proper Cloudflare Images format
urls: result.variants && result.variants.length > 0 ? { urls: result.uploaded ? {
original: result.variants[0], original: `${baseUrl}/public`,
thumbnail: `${result.variants[0]}/w=400,h=400,fit=crop`, thumbnail: `${baseUrl}/thumbnail`,
medium: `${result.variants[0]}/w=800,h=600,fit=cover`, medium: `${baseUrl}/medium`,
large: `${result.variants[0]}/w=1200,h=900,fit=cover`, large: `${baseUrl}/large`,
avatar: `${baseUrl}/avatar`,
} : null } : null
}), }),
{ {