Prompt to Add Cloudflare R2 File Upload to Next.js

Copy-paste AI prompt to add Cloudflare R2 presigned upload URLs to a Next.js App Router project with server-side validation.

Give this prompt to your agent to implement direct-to-R2 file uploads using presigned URLs — keeping secrets server-side and avoiding the common mistake of routing file bytes through your Next.js server.

Main Prompt

You are working in a Next.js App Router project using TypeScript.

Task: add Cloudflare R2 file upload via presigned PUT URLs.

Requirements:
- Install `@aws-sdk/client-s3` and `@aws-sdk/s3-request-presigner` (R2 is S3-compatible).
- Create a Server Action in `src/lib/actions/get-upload-url.ts` that:
  - Accepts `{ filename: string; contentType: string; sizeBytes: number }`.
  - Validates: `sizeBytes` must be <= 10_485_760 (10 MB); `contentType` must start with `image/`.
  - Uses `PutObjectCommand` + `getSignedUrl` to generate a 60-second presigned URL.
  - Returns `{ uploadUrl: string; publicUrl: string; key: string }`.
- Store credentials in `.env`: `R2_ACCOUNT_ID`, `R2_ACCESS_KEY_ID`, `R2_SECRET_ACCESS_KEY`,
  `R2_BUCKET_NAME`, `R2_PUBLIC_URL`.
- Create a client component `src/components/FileUploader.tsx` that:
  - Renders a file `<input accept="image/*" />`.
  - On change: calls the Server Action to get the presigned URL, then does a `fetch` PUT directly
    to R2, then shows the `publicUrl` as a preview.
  - Shows upload progress via `XMLHttpRequest` `progress` events (not fetch, which lacks progress).
- Do not add any other dependencies. Do not modify `next.config.ts` unless required for image domains.

Stop and list all planned file changes before writing any code.

Implementation Notes

R2 uses the S3 SDK with endpoint: https://<accountId>.r2.cloudflarestorage.com and region: 'auto'. Forgetting region: 'auto' causes a signature error.
Presigned URLs are generated server-side; the client never sees R2_SECRET_ACCESS_KEY.
For public bucket access, set the R2 bucket’s “Public access” toggle in the Cloudflare dashboard and supply the resulting r2.dev URL as R2_PUBLIC_URL.

Expected File Changes

src/lib/actions/get-upload-url.ts      (new)
src/lib/r2.ts                          (new — S3Client singleton)
src/components/FileUploader.tsx        (new — Client Component)
.env.example                           (edited)
package.json                           (edited)
next.config.ts                         (edited — add r2.dev to images.remotePatterns)

Acceptance Criteria

A file selected in FileUploader triggers a presigned URL fetch, then uploads directly to R2.
Files larger than 10 MB are rejected before any network request.
Non-image MIME types are rejected server-side and return a 400-equivalent error.
The public URL preview renders the uploaded image after upload completes.

Test Commands

bun run typecheck
bun run dev
# upload a PNG < 10 MB via the component and confirm it appears in R2 bucket
# attempt a 15 MB file and confirm rejection
# attempt a .pdf and confirm rejection

Common AI Mistakes

Setting region: 'us-east-1' instead of 'auto', causing SignatureDoesNotMatch errors.
Routing the file bytes through the Next.js Server Action instead of fetching directly to R2.
Forgetting to call 'use server' at the top of the actions file.
Using fetch for the upload and losing progress events.

Fix Prompt

The upload fails with `SignatureDoesNotMatch` or the file routes through the server.
Fix in order:
1. In `src/lib/r2.ts`, set `region: 'auto'` and `endpoint: https://${R2_ACCOUNT_ID}.r2.cloudflarestorage.com`.
2. In `FileUploader.tsx`, use `XMLHttpRequest` with a `progress` event to PUT directly to the
   presigned URL — not fetch, and not a Server Action for the actual upload bytes.
Show corrected diff only.

Prompt to Add Cloudflare R2 File Upload