Uploads

In this part of the documentation we are going to show you how to integrate S3 bucket for managing file uploads.

We've used the Cloudflare R2 bucket in this boilerplate. You can use any S3 bucket you want. Follow the instructions below to integrate an S3 bucket into your SaaS boilerplate.

Create a Cloudflare R2 Bucket

1. Login to your Cloudflare account.

2. Go to R2->Create Bucket fill in the bucket name and save.

Also, update this env variable with your Bucket name.

R2_BUCKET_NAME=YOUR_BUCKET_NAME

3. Generate the Secret and Access Key: Copy the Account ID and save it to the env file, after that, click on the Manage R2 API Tokens button.

R2_ACCOUNT_ID

It'll redirect you to this page. Now click on the Create API token button.

Now assign the Token name, then select Object Read & Write permission and choose the Bucket you created earlier. Once you are done, scroll down and click the Create API Token button.

Once you click on that button you'll see the Access Key ID and the Secret Access Key. Go ahead and copy them and update the env file.

R2_ACCESS_KEY_ID=
R2_SECRET_ACCESS_KEY=

This is it. We've used the R2 bucket to store the user profile image. You can use the upload action and modify it for other resources like downloadable files etc.

Configuring CORS Policy

Now we have to configure the CORS policy to enable the file upload from your App.

1. Go to your Bucket->Settings

2. Scroll down and click on the Edit CORS Policy

3. Update the CORS policy with the following code and save it.

[
  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "PUT",
      "GET"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "ExposeHeaders": [],
    "MaxAgeSeconds": 3000
  }
]