/// import { IRequest, error } from 'itty-router' import { Environment } from './types' // assets are stored in the bucket under the /uploads path function getAssetObjectName(uploadId: string) { return `uploads/${uploadId.replace(/[^a-zA-Z0-9\_\-]+/g, '_')}` } // 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) { const objectName = getAssetObjectName(request.params.uploadId) const contentType = request.headers.get('content-type') ?? '' if (!contentType.startsWith('image/') && !contentType.startsWith('video/')) { return error(400, 'Invalid content type') } if (await env.TLDRAW_BUCKET.head(objectName)) { return error(409, 'Upload already exists') } await env.TLDRAW_BUCKET.put(objectName, request.body, { httpMetadata: request.headers, }) return { ok: true } } // when a user downloads an asset, we retrieve it from the bucket. we also cache the response for performance. export async function handleAssetDownload( request: IRequest, env: Environment, ctx: ExecutionContext ) { const objectName = getAssetObjectName(request.params.uploadId) // if we have a cached response for this request (automatically handling ranges etc.), return it const cacheKey = new Request(request.url, { headers: request.headers }) // @ts-ignore const cachedResponse = await caches.default.match(cacheKey) if (cachedResponse) { return cachedResponse } // if not, we try to fetch the asset from the bucket const object = await env.TLDRAW_BUCKET.get(objectName, { range: request.headers, onlyIf: request.headers, }) if (!object) { return error(404) } // write the relevant metadata to the response headers const headers = new Headers() object.writeHttpMetadata(headers) // assets are immutable, so we can cache them basically forever: headers.set('cache-control', 'public, max-age=31536000, immutable') headers.set('etag', object.httpEtag) // we set CORS headers so all clients can access assets. we do this here so our `cors` helper in // worker.ts doesn't try to set extra cors headers on responses that have been read from the // cache, which isn't allowed by cloudflare. headers.set('access-control-allow-origin', '*') // cloudflare doesn't set the content-range header automatically in writeHttpMetadata, so we // need to do it ourselves. let contentRange if (object.range) { if ('suffix' in object.range) { const start = object.size - object.range.suffix const end = object.size - 1 contentRange = `bytes ${start}-${end}/${object.size}` } else { const start = object.range.offset ?? 0 const end = object.range.length ? start + object.range.length - 1 : object.size - 1 if (start !== 0 || end !== object.size - 1) { contentRange = `bytes ${start}-${end}/${object.size}` } } } if (contentRange) { 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 if (status === 200) { const [cacheBody, responseBody] = body!.tee() // @ts-ignore ctx.waitUntil(caches.default.put(cacheKey, new Response(cacheBody, { headers, status }))) return new Response(responseBody, { headers, status }) } return new Response(body, { headers, status }) }