jeffemmett
/
canvas-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix asset upload rendering errors

This commit is contained in:
Jeff-Emmett 2025-03-19 18:30:15 -07:00
parent 12d26d0643
commit 9a3ad9a1ab
2 changed files with 127 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
worker/assetUploads.ts
View File

@ -10,15 +10,17 @@ function getAssetObjectName(uploadId: string) {
// when a user uploads an asset, we store it in the bucket. we only allow image and video assets.
export async function handleAssetUpload(request: IRequest, env: Environment) {
// If this is a preflight request, return appropriate CORS headers
if (request.method === 'OPTIONS') {
const headers = new Headers({
// Add CORS headers that will be used for both success and error responses
const corsHeaders = {
'access-control-allow-origin': '*',
'access-control-allow-methods': 'POST, OPTIONS',
'access-control-allow-headers': 'content-type',
'access-control-allow-methods': 'GET, POST, HEAD, OPTIONS',
'access-control-allow-headers': '*',
'access-control-max-age': '86400',
})
return new Response(null, { headers })
}
// Handle preflight
if (request.method === 'OPTIONS') {
return new Response(null, { headers: corsHeaders })
}
try {
@ -26,21 +28,38 @@ export async function handleAssetUpload(request: IRequest, env: Environment) {
const contentType = request.headers.get('content-type') ?? ''
if (!contentType.startsWith('image/') && !contentType.startsWith('video/')) {
return error(400, 'Invalid content type')
return new Response('Invalid content type', {
status: 400,
headers: corsHeaders
})
}
if (await env.TLDRAW_BUCKET.head(objectName)) {
return error(409, 'Upload already exists')
return new Response('Upload already exists', {
status: 409,
headers: corsHeaders
})
}
await env.TLDRAW_BUCKET.put(objectName, request.body, {
httpMetadata: request.headers,
})
return { ok: true }
return new Response(JSON.stringify({ ok: true }), {
headers: {
...corsHeaders,
'content-type': 'application/json'
}
})
} catch (error) {
console.error('Asset upload failed:', error);
return new Response(`Upload failed: ${(error as Error).message}`, { status: 500 });
console.error('Asset upload failed:', error)
return new Response(JSON.stringify({ error: (error as Error).message }), {
status: 500,
headers: {
...corsHeaders,
'content-type': 'application/json'
}
})
}
}
@ -50,45 +69,61 @@ export async function handleAssetDownload(
env: Environment,
ctx: ExecutionContext
) {
// Define CORS headers to be used consistently
const corsHeaders = {
'access-control-allow-origin': '*',
'access-control-allow-methods': 'GET, HEAD, OPTIONS',
'access-control-allow-headers': '*',
'access-control-expose-headers': 'content-length, content-range',
'access-control-max-age': '86400',
}
// Handle preflight
if (request.method === 'OPTIONS') {
return new Response(null, { headers: corsHeaders })
}
try {
const objectName = getAssetObjectName(request.params.uploadId)
// if we have a cached response for this request (automatically handling ranges etc.), return it
// Handle cached response
const cacheKey = new Request(request.url, { headers: request.headers })
// @ts-ignore
const cachedResponse = await caches.default.match(cacheKey)
if (cachedResponse) {
return cachedResponse
const headers = new Headers(cachedResponse.headers)
Object.entries(corsHeaders).forEach(([key, value]) => headers.set(key, value))
return new Response(cachedResponse.body, {
status: cachedResponse.status,
headers
})
}
// if not, we try to fetch the asset from the bucket
// Get from bucket
const object = await env.TLDRAW_BUCKET.get(objectName, {
range: request.headers,
onlyIf: request.headers,
})
if (!object) {
return error(404)
return new Response('Not Found', {
status: 404,
headers: corsHeaders
})
}
// write the relevant metadata to the response headers
// Set up response headers
const headers = new Headers()
object.writeHttpMetadata(headers)
Object.entries(corsHeaders).forEach(([key, value]) => headers.set(key, value))
// assets are immutable, so we can cache them basically forever:
headers.set('cache-control', 'public, max-age=31536000, immutable')
headers.set('etag', object.httpEtag)
// Set comprehensive CORS headers for asset access
headers.set('access-control-allow-origin', '*')
headers.set('access-control-allow-methods', 'GET, HEAD, OPTIONS')
headers.set('access-control-allow-headers', '*')
headers.set('access-control-expose-headers', 'content-length, content-range')
headers.set('cross-origin-resource-policy', 'cross-origin')
headers.set('cross-origin-opener-policy', 'same-origin')
headers.set('cross-origin-embedder-policy', 'require-corp')
// cloudflare doesn't set the content-range header automatically in writeHttpMetadata, so we
// need to do it ourselves.
// Handle content range
let contentRange
if (object.range) {
if ('suffix' in object.range) {
@ -108,11 +143,10 @@ export async function handleAssetDownload(
headers.set('content-range', contentRange)
}
// make sure we get the correct body/status for the response
const body = 'body' in object && object.body ? object.body : null
const status = body ? (contentRange ? 206 : 200) : 304
// we only cache complete (200) responses
// Cache successful responses
if (status === 200) {
const [cacheBody, responseBody] = body!.tee()
// @ts-ignore
@ -121,4 +155,17 @@ export async function handleAssetDownload(
}
return new Response(body, { headers, status })
} catch (error) {
console.error('Asset download failed:', error)
return new Response(
JSON.stringify({ error: (error as Error).message }),
{
status: 500,
headers: {
...corsHeaders,
'content-type': 'application/json'
}
}
)
}
}

12
worker/worker.ts
View File

@ -37,18 +37,19 @@ const { preflight, corsify } = cors({
return origin
}
// For development - check if it's a localhost or local IP
// For development - check if it's a localhost or local IP (both http and https)
if (
origin.match(
/^http:\/\/(localhost|127\.0\.0\.1|192\.168\.|169\.254\.|10\.)/,
/^https?:\/\/(localhost|127\.0\.0\.1|192\.168\.|169\.254\.|10\.)/,
)
) {
return origin
}
return undefined
// If no match found, return * to allow all origins
return "*"
},
allowMethods: ["GET", "POST", "OPTIONS", "UPGRADE"],
allowMethods: ["GET", "POST", "HEAD", "OPTIONS", "UPGRADE"],
allowHeaders: [
"Content-Type",
"Authorization",
@ -62,7 +63,8 @@ const { preflight, corsify } = cors({
"Content-Range",
"Range",
"If-None-Match",
"If-Modified-Since"
"If-Modified-Since",
"*"
],
maxAge: 86400,
credentials: true,