Cloudflare R2 is used to store image, audio, and PDF files. It is free, has zero egress fees, and is S3 compatible.

You need to set up Cloudflare storage if you are using any of the following demo apps:

Chat with PDF

Upload a PDF and use OpenAI to chat with it

Voice to notes

Record audio, transcribe it and summarize it using AI

Stable Diffusion XL

Generate images using SDXL

DALL-E

Generate logos using DALL-E

GPT-4o & Vision

Analyze and describe images using GPT-4 or GPT Vision

API routes are set up for all the demo apps. For more specific information, check out their respective documentation pages to find the API routes.

​
Set up Cloudflare R2

Setting it up is easy and shouldn’t take more than 5 minutes.

​
1. Create a bucket

Create an R2 bucket on Cloudflare

  1. Go to Cloudflare -> R2 -> Overview
  2. Click “Create a bucket”
    • Give your bucket a name
    • Choose a location

Your bucket is ready! Now we need to give it a publicly accessible URL and get the required API keys to add to our .env file.

​
2. Enable public access

  1. Go to your bucket
  2. Click on Settings
  3. Copy your S3 API and Location
  • You can remove the name of your bucket from the link. For instance, in the image below, you would copy everything except the /testing part.

Copy your endpoint ID and location

  1. Now you have two options:
    • Option A: If you have a domain name on Cloudflare, add a custom domain, e.g., cdn.anotherwrapper.com. Your files will be accessible from that domain.
    • Option B: If you don’t have a custom domain, allow the R2.dev subdomain. Note: This is not recommended for production environments as it is rate-limited.

Whatever option you choose, copy this URL as we’ll need it for our .env file.

Use an R2.dev domain if you don't have a custom one

​
3. Get API keys and other information

  1. Go to R2 -> Overview
  2. Click on Manage R2 API tokens

    Click on Manage R2 API tokens

  3. Click on Create API token
  4. Under permissions, give it Admin Read & Write. This allows users to delete their own data.
  5. Define how long the token will stay active
  6. Click save

You should now have your API tokens. Copy the Access Key ID and the Secret Access Key.

Copy the Access Key ID and the Secret Access Key

Add the following to your .env file:

.env
STORAGE_REGION=WEUR
STORAGE_ACCESS_KEY=your_access_key
STORAGE_SECRET_KEY=your_secret_key
STORAGE_ENDPOINT=your_s3_api_without_bucket_name
STORAGE_BUCKET=bucketname_goes_here
STORAGE_PUBLIC_URL=your_public_url

That’s it - you should now be able to use uplaoding functionalities in the app.

If you want to check it out, the S3 client is set up and stored under @/lib/cloudflare.ts.

​
Use alternatives to Cloudflare R2

Cloudflare R2 is S3 compatible and uses the same API, so you should be able to fairly easily use other S3 compatible storage providers.

I’m still working on adding a documentation for how to set it up, for example, on AWS S3.

SupabaseDesign