Image Uploads with Presigned URLs (Cloudflare R2)

Mar 15, 2025

1 min read

Presigned URLs allow users to upload files directly to Cloudflare R2 (or other object storage) without routing through your backend.

Step 1 – Generate a Presigned URL (server-side):

Use R2 SDK or S3-compatible tools:

import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';

const client = new S3Client({ region: 'auto', endpoint: 
'https://<account_id>.r2.cloudflarestorage.com' });

const command = new PutObjectCommand({
Bucket: 'product-images',
Key: 'uploads/image-123.png',
ContentType: 'image/png',
});

const signedUrl = await getSignedUrl(client, command, { expiresIn: 900 });

Step 2 – Upload from Client:

await fetch(signedUrl, {
method: 'PUT',
headers: { 'Content-Type': 'image/png' },
body: imageFile
});

Secure uploads by validating the key pattern server-side before signing.