waptik/r2-image-worker

r2-image-worker

Store and Deliver images with Cloudflare R2 backend Cloudflare Workers.

Synopsis

1. Deploy r2-image-worker to Cloudflare Workers.
2. Get the URL of the image file with content type such as .png, jpg, or gif.
3. PUT the image url in the body of r2-image-worker's /upload endpoint.
4. An image binary will be stored in Cloudflare R2 storage.
5. r2-image-worker will respond with the key of the stored image. abcdef.png
6. r2-image-worker serves the image on https://r2-image-worker.username.workers.dev/abcdef.png
7. Images will be cached on Cloudflare CDN.

User => Image URL => fetch image => r2-image-worker => R2
User <= Image <= r2-image-worker <= CDN Cache <= R2

Prerequisites

• Cloudflare Account
• Wrangler CLI
• (Custom domain _ Cache API is not available in _.workers.dev domain)

Set up

First, git clone

git clone https://github.com/waptik/r2-image-worker.git
cd r2-image-worker

Create R2 bucket:

wrangler r2 bucket create images

Copy wrangler.example.toml to wrangler.toml:

cp wrangler.example.toml wrangler.toml

Edit wrangler.toml.

Variables

Secret variables

Secret variables are:

• USER - User name of basic auth
• PASS - User password of basic auth

To set these, use wrangler secret put command:

wrangler secret put USER

Publish

To publish to your Cloudflare Workers:

npm run cloud

Endpoints

/upload

Header:

To pass the Basic Auth, add the Base64 string of "user:pass" to Authorization header.

Authorization: Basic ...

Body:

Value of body is url of the remote image.

{
  "body": "https://www.businessinsider.in/photo/4754..."
}

Test

1. Upload to your worker endpoint.

echo '{"body" : "https://www.businessinsider.in/photo/47547654/40-trips-you-should-take-before-you-turn-30/explore-the-sahara-desert-the-largest-desert-on-the-african-continent-.jpg"}' | curl -XPUT -H "Content-Type: application/json" -d @-  https://change_user_here:change_pass_here@change_url_here/upload -vvv

2. Visit the image

https://change_user_here:change_pass_here@change_url_here/image_returned_in_step2

Use with Shortcuts

Awesome!!!

Setting shortcuts like this:

Shared shortcut: Upload to Cloudflare. Prior to utilizing it, input the domain and user:pass into the designated text field.

Author

TheVirginBrokey https://github.com/waptik

Credits

Yusuke Wada https://github.com/yusukebe for the initial work on r2-image-worker

License

MIT