zhuqling / r2-image-worker

Store and Deliver images with R2 backend Cloudflare Workers.

r2-image-worker

Store and Deliver images with Cloudflare R2 backend Cloudflare Workers.

Synopsis

1. Deploy r2-image-worker to Cloudflare Workers.
2. Make base64 strings from the image file such as .png, jpg, or gif.
3. PUT the base64 strings to r2-image-worker.
4. An image binary will be stored in Cloudflare R2 storage.
5. r2-image-worker will respond the key of the stored image. abcdef.png
6. r2-image-worker serve the images on https://r2-image-worker.username.workers.dev/abcdef.png
7. Images will be cached on Cloudflare CDN.

User => Image => base64 => 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/yusukebe/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 deploy

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 Basic64 string of image binary.

{
  "body": "Base64 Text..."
}

Test

1. Download a simple image

wget  https://www.bing.com/th?id=OHR.Unesco50_ZH-CN3652927413_UHD.jpg -O /tmp/1.jpg

2. Upload to u endpoint.

echo '{"body" : "'"$( cat /tmp/1.jpg | base64)"'"}' | curl -XPUT -H "Content-Type: application/json" -d @-  https://change_user_here:change_pass_here@change_url_here/upload -vvv

3. 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

Yusuke Wada https://github.com/yusukebe

License

MIT