Cloudflare R2 ImageBed

Warning

The repo is archived and no longer maintained. It is recommended to use the S3 API of R2 for uploading and publish it through Custom Domain.

English | 简体中文

CF-R2-ImageBed is a image hosting service based on Cloudflare R2 object storage. PicGo supported.

Cloudflare R2 offers a free tier.

The repo contains 3 parts:

• A Worker that handles requests to upload files to R2 storage or get file from it.
• A Python script as a demo to show to upload file to Worker.
• A Page Function that can provide file in R2 bucket.

Basic knowledge

When you deploy a worker to Cloudflare, they host it at domain <worker name>.<worker subdomain>. In my case, it's upload-blog.caomingjun.workers.dev.

Key is a string to distinguish object in R2. We use the path name as key. For example, PUT https://upload-blog.caomingjun.workers.dev/foo/bar.png will put the file with key foo/bar.png.

If the upload succeed, the worker will send the URL which you can access the file. It will be <ROOT_URL><key>.

Usage

Pre-requisites

You should:

• Have a Cloudflare Workers account
• Enable R2 for your Cloudflare account and create a bucket
• Install Python3 and pip on your computer

Also, prepare the following secrets

• Cloudflare API token with Edit Cloudflare Workers permissions.

Warning if your image bed have Chinese users: *.workers.dev suspected of being blocked in China, so you may need a domain to bind to it.

Deploy the worker

Firstly, fork this repo.

You may want to change these in the source code:

• allowPaths in worker/src/config.ts. A path that doesn't match any of the allowPaths will be rejected.
• allowDelete in worker/src/config.ts. If false, delete or overwrite will be rejected.
• name = "upload-blog" in worker/wrangler.toml . It tells Cloudflare to deploy the worker to upload-blog.<your worker subdomain> . You can change it.

In the new repo, create these secrets:

• BUCKET_NAME : the name of the R2 bucket you create in Pre-requisites.
• CF_API_TOKEN : the Cloudflare API token with Edit Cloudflare Workers permissions.
• CLOUDFLARE_ACCOUNT_ID : your Cloudflare account ID, can be found in your workers dashboard.
• ROOT_URL : the root of URL that you want to use to access the file you upload. You can just put the URL that you deploy your worker to, like https://upload-blog.<your worker subdomain>/. Don't miss the / at the end.
• UPLOAD_SECRET : something like a password to avoid someone upload file to you bucket. You can use any string you like.

Then run the workflow deploy. You may need to enable actions for the repo first.

Upload files

We recommend you to use our PicGo plugin, because PicGo supports many editors like Typora and VSCode. PicGo also have a GUI version.

You can also use our Python uploader which supports Typora or write your own.

Provides the files from Cloudflare Pages

Cloudflare Pages Functions allow running workers when someone access specified URL in your page.

You can use /page-function/[[path]].ts as a example. For how to use Pages Functions and how it works, please refer to Cloudflare Pages Functions docs.

Todo

• Finish Page Function. (Waiting for Cloudflare to support R2 binding in Pages Functions)
• Support Typora image upload in python script.
• Check if there is object using the same key in bucket before putting it.
• PicGo plugin.

Changelog

• 2022-06-02: Add support for getting info and deleting files. Check if there is object using the same key in bucket before putting it. Store Content-Type if provided.
• 2022-08-09: Add support for Pages Functions.

Disclaimer

Cloudflare is a trademark owned by Cloudflare, Inc.

Cloudflare does not have any involvement in the project and did not review or approve of this project.