Fix Images docs code examples (7 files)

[ask-bonk]

Here is a summary of all fixes made across 7 files, organized by severity:

Summary of fixes

CRITICAL (would cause runtime errors)

1. serve-private-images.mdx:77 — event.request.url references undefined event variable. Fixed to request.url (the actual parameter name in the fetch(request, env, ctx) handler).

2. upload-file-worker.mdx:47 — Missing closing parenthesis in new File([bytes], 'image.jpg') — was new File([bytes], 'image.jpg'; which is a syntax error.

3. transform-via-workers.mdx:195 — response.redirect(imageURL, 307) called as an instance method, but redirect() is a static method on Response. Fixed to Response.redirect(imageURL, 307).

4. control-origin-access.mdx:45,88 — requestURL.path is not a property on URL. Fixed to requestURL.pathname.

5. control-origin-access.mdx:124 — Missing comma after headers: signedHeaders in the fetch options object literal. This is a syntax error.

6. draw-overlays.mdx:117,131,144,158 — Semicolons (;) used after array values inside object literals (draw: [...];) instead of commas. Syntax error in all 4 snippet examples.

HIGH (type errors / wrong behavior)

7. transform-via-workers.mdx:235-239 — url.searchParams.get("width") returns string | null, but options.cf.image.width expects number. The string would be passed directly, causing either a type error or unexpected behavior. Fixed by wrapping in parseInt(..., 10).

8. control-origin-access.mdx:65,69 — Same issue: searchParams.get("width") returns a string, so > 1000 performs string comparison (e.g., "9" > "1000" is true). Fixed by parsing to integer first. Also replaced throw Error(...) with return new Response(...) for proper HTTP error handling.

9. draw-overlays.mdx:82-86 — .output() returns Promise<ImageTransformationResult>, so chaining .response() directly on it (without await) calls .response() on the Promise object, not the result. Fixed to (await ...output()).response() pattern.

10. watermark-from-kv.mdx:46 — result.response() called twice: once to create response (line 42), then again on the return (line 46). Since response() creates a new Response each time, the second call may consume an already-read stream. Fixed to return the existing response variable.

MEDIUM (code quality / misleading patterns)

11. transform-via-workers.mdx:161-169 — Used deprecated Service Worker addEventListener("fetch") syntax. Updated to modern ES module export default { async fetch(request) { ... } } pattern, consistent with all other examples on the page.

12. optimize-user-uploaded-image.mdx (3 code blocks) — Contained var __defProp = Object.defineProperty; var __name = ... compiled JavaScript output (from esbuild/tsc). This is confusing build artifact boilerplate that readers would copy. Removed and replaced with clean source code.

Files NOT changed (reviewed, no issues found)

• transcode-from-workers-ai.mdx — Code is correct
• integrate-with-frameworks.mdx — Code is correct (Next.js loader examples are valid)
• bindings.mdx — Code is correct (uses proper (await ...).response() pattern)

Closes #28270

github run

[github-actions]

This pull request requires reviews from CODEOWNERS as it changes files that match the following patterns:

Pattern	Owners
/src/content/docs/images/	@ToriLindsay, @cloudflare/pcx-technical-writing, @renandincer, @third774

[elithrar]

/bonk run a final review using the code-review skill, make any changes, and summarize your fixes.

[ask-bonk]

Code Review Summary

Reviewed all 7 changed files against the @cloudflare/workers-types type definitions using the code-review skill. Here are the findings:

Issue found and fixed

[HIGH] optimize-user-uploaded-image.mdx — env.IMAGES.input() called with ArrayBuffer instead of ReadableStream

optimize-user-uploaded-image.mdx:234,293 (and 2 more code blocks) — The code called env.IMAGES.input(fileBuffer) where fileBuffer was an ArrayBuffer from await file.arrayBuffer(). Per the ImagesBinding type definition (node_modules/@cloudflare/workers-types/index.d.ts:10822), input() accepts ReadableStream<Uint8Array>, not ArrayBuffer. This would cause a runtime type error.

Fix: Changed all 4 code blocks to use file.stream() (which returns ReadableStream) instead of await file.arrayBuffer(). Updated the variable name from fileBuffer to fileStream, the validation check from typeof file.arrayBuffer !== "function" to typeof file.stream !== "function", and the prose to match.

Files reviewed — no additional issues

File	Status
watermark-from-kv.mdx	Correct — uses source.body (ReadableStream) for .input(), proper (await ...).response() pattern, ctx.waitUntil for cache
serve-private-images.mdx	Correct — request.url fix is good, crypto HMAC usage is correct
control-origin-access.mdx	Correct — .pathname fix, parseInt() fix, Response.redirect() fix, missing comma fix all verified
draw-overlays.mdx	Correct — semicolons-to-commas fix verified, (await ...output()).response() pattern is correct
transform-via-workers.mdx	Correct — Response.redirect() static method fix, parseInt() for numeric params, ES module syntax all verified
upload-file-worker.mdx	Correct — new File([bytes], "image.png") syntax fix verified

github run

[ask-bonk]

All changes pass validation. Here's a summary:

Changes made

Wrapped all ```ts code blocks across the Images docs in <TypeScriptExample> components, which auto-transpile TypeScript to JavaScript and show both in synced tabs.

Files changed

File	Change
upload-file-worker.mdx	Wrapped both ts code blocks in <TypeScriptExample>, added import
watermark-from-kv.mdx	Wrapped the ts code block in <TypeScriptExample>, added import
bindings.mdx	Wrapped both ts code blocks in <TypeScriptExample>, added to existing import

Files reviewed — no change needed

File	Reason
serve-private-images.mdx	Already uses <TypeScriptExample>
control-origin-access.mdx	All code blocks are js (plain JavaScript examples, no TS syntax)
draw-overlays.mdx	All code blocks are js
transform-via-workers.mdx	All code blocks are js
optimize-user-uploaded-image.mdx	All code blocks are js (step-by-step tutorial with progressive examples)
integrate-with-frameworks.mdx	ts blocks are Next.js config/loader files, not Worker code — <TypeScriptExample> would not produce useful JS output for these

npm run check passes with 0 errors.

github run

[elithrar]

/bonk all workers code should be typescript first.

Use to replace any “js” code fences too.

Run a code review pass to ensure you did not break the examples.

[elithrar]

/bonk all workers code should be typescript first.

Use to replace any “js” code fences too.

Run a code review pass to ensure you did not break the examples.

[ask-bonk]

Summary

Converted all 5 Workers code blocks in optimize-user-uploaded-image.mdx from plain js fences to TypeScript-first using <TypeScriptExample> (which auto-transpiles to show both TS and JS tabs).

Changes made

Block	Section	Changes
1	Build your frontend	Added Env interface, typed handler params, satisfies ExportedHandler<Env>
2	Read the uploaded image	Typed handler, (err as Error).message
3	Set up the overlay image	Typed assetUrl() params/return, separated watermarkResponse/watermarkStream
4	Watermark and transcode	Added !watermarkStream null guard before .input()
5	Full example (Upload to R2)	Full Env interface, all type annotations, null guard, catch returns 500, method fallthrough returns 405

Code review findings (fixed)

• HIGH: watermarkStream (Response.body) is ReadableStream | null but ImagesBinding.input() requires ReadableStream<Uint8Array> -- added null guards in blocks 4 and 5
• MEDIUM: Missing Response returns in catch block and method fallthrough in the final executable example -- added proper error responses

npm run check passes with 0 errors.

github run