Awesome

Aster

A robust file uploader for Cloudflare R2. Complements Render nicely.

If you want something simpler though, try https://github.com/Erisa/simple-r2-form.

<img width="791" alt="a screenshot of aster" src="https://github.com/kotx/aster/assets/33439542/19b7ea0d-0d1c-40b5-963a-5d815cc9aa06">

Features

Multipart uploads
Uploads are resumable (even after tab refreshes)
Image editor
Progress tracking
Most of these are thanks to Uppy!

Notes

Aster DOES NOT AUTHENTICATE! You should put it behind Cloudflare Access.
Non-multipart uploads are currently disabled in the UI because Uppy doesn't display the URL: https://github.com/transloadit/uppy/issues/4618

Setup

Configure the R2 bucket CORS policy in the Cloudflare dashboard:

[
    {
        "AllowedOrigins": ["https://[CHANGE ME TO YOUR WORKER CUSTOM DOMAIN]"],
        "AllowedMethods": ["GET", "PUT"],
        "MaxAgeSeconds": 3000,
        "AllowedHeaders": [
            "Authorization",
            "x-amz-date",
            "x-amz-content-sha256",
            "content-type"
        ],
        "ExposeHeaders": ["ETag", "Location"]
    }
]

Create a R2 token: here with Object Read & Write permissions.

Method 1 (Local)

Clone locally: git clone https://github.com/kotx/aster.git
Install dependencies: pnpm i
Tweak wrangler.toml to your liking (set bucket_name, PUBLIC_BUCKET_URL, R2_BUCKET_NAME)
Run wrangler secret put [NAME] for R2_ACCESS_KEY, R2_SECRET_KEY
Run pnpm run deploy

Method 2 (GitHub Actions)

Fork this repository
Set the secrets CF_API_TOKEN (with the Edit Cloudflare Workers template) and CF_ACCOUNT_ID in the repo settings
Enable workflows in the Actions tab
Update wrangler.toml as needed (this will trigger the workflow)
In your Cloudflare dashboard, set the required secrets R2_ACCESS_KEY, R2_SECRET_KEY in the worker settings.

Development

Remember to add "http://127.0.0.1:8787", "http://localhost:8787" to the allowed origins CORS policy above.

Install deps:

pnpm i

Start development server:

pnpm dev