In the previous post, we created a worker in development, in this post, we learn and create the Pre-signed URLs.

Presigned URLs

Presigned URLs are an S3 concept for sharing direct access to your bucket without revealing your token secret. A pre-signed URL authorizes anyone with the URL to perform an action to the S3 compatibility endpoint for an R2 bucket. By default, the S3 endpoint requires an AUTHORIZATION header signed by your token. Every pre-signed URL has S3 parameters and search parameters containing the signature information that would be present in an AUTHORIZATION header. The performable action is restricted to a specific resource, an operation, and has an associated timeout.

Read more: https://developers.cloudflare.com/r2/api/s3/presigned-urls/

For example, in the previous post, we want to upload a file, we will provide 3 things:

Workers endpoint (ex: https://worker-test.yourusername.workers.dev/)
AUTH_KEY_SECRET
A file to upload

You can't put AUTH_KEY_SECRET in the client, so we'll create a pre-signed URL for S3 requests.

How it works:

The client sends a request to the server
The server sends a request to the storage server to get a pre-signed URL and response the pre-signed URL for the client
The client uses the pre-signed URL to request with the PUT method to upload a file

In worker, the code be like:

import { AwsClient } from "aws4fetch";
const r2 = new AwsClient({
	accessKeyId: "your_accessKeyId",
	secretAccessKey: "your_secretAccessKey",
});
var hasValidHeader = (request, env) => {
	return request.headers.get('x-api-key') === env.AUTH_KEY_SECRET
}
function authorizeRequest(request, env, key) {
	switch (request.method) {
		case 'PUT':
			return hasValidHeader(request, env)
		case 'POST':
			return hasValidHeader(request, env)
		case 'DELETE':
			return hasValidHeader(request, env)
		case 'PATCH':
			return hasValidHeader(request, env)
		case 'GET':
			if (env.PRIVATE_BUCKET) {
				return hasValidHeader(request, env)
			} else {
				return true
			}
		case 'OPTIONS':
			return true
		default:
			return false
	}
}
var worker_default = {
	async fetch(req) {
		// This is just an example to demonstrating using aws4fetch to generate a presigned URL.
		// This Worker should not be used as-is as it does not authenticate the request, meaning
		// that anyone can upload to your bucket.
		//
		// Consider implementing authorization, such as a preshared secret in a request header.
		const requestPath = new URL(req.url).pathname;
	
		// Cannot upload to the root of a bucket
		if (requestPath === "/") {
		  return new Response("Missing a filepath", { status: 400 });
		}
	
		const bucketName = "your_bucketName";
		const accountId = "your_accountId ";
	
		const url = new URL(
		  `https://${bucketName}.${accountId}.r2.cloudflarestorage.com`
		);
	
		// preserve the original path
		url.pathname = requestPath;
	
		// Specify a custom expiry for the presigned URL, in seconds
		url.searchParams.set("X-Amz-Expires", "3600");
	
		const signed = await r2.sign(
		  new Request(url, {
			method: "PUT",
		  }),
		  {
			aws: { signQuery: true },
		  }
		);
	
		// Caller can now use this URL to upload to that object.
		return new Response(signed.url, { status: 200 });
	  },
}
export { worker_default as default }

your_accessKeyId and your_secretAccessKey, you can get it by creating in R2 page like Image 1:

**Image 1:** *Create API Token to get secretAccessKey and accessKeyId*

your_accountId and your_bucketName: Is your account id in R2 page Image 1 and your bucket name.

Remember to install the aws4fetch package with the command:

npm i aws4fetch

Finally, when you can create a GET method with URL like the following to get presigned URL like Image 2:

**Image 2:** *Create a GET method request to create the pre-signed URL*

Send a request with the pre-signed URL above to upload the image like Image 3

**Image 3:** *Send a request with the pre-signed URL*

After that, I check my bucket in Cloudflare, the image has been uploaded