Docs
Integrations
Uploads

File Uploads

In this guide, we'll show you how to set up file uploads in the NextAdmin boilerplate. By default, we use Cloudflare R2, but you can use any S3-compatible storage provider.

1. Create a Cloudflare R2 Bucket

  1. Log in to your Cloudflare Dashboard (opens in a new tab).
  2. Navigate to R2 > Create Bucket.
  3. Choose a bucket name and click Create Bucket.
  4. Update your .env file with the bucket name:
R2_BUCKET_NAME="YOUR_BUCKET_NAME"

Create R2 Bucket

2. Generate API Credentials

To allow your application to interact with the R2 bucket, you need to generate an API token.

  1. From the R2 overview page, copy your Account ID and add it to your .env file: 
    R2_ACCOUNT_ID="YOUR_ACCOUNT_ID"
  2. Click on Manage R2 API Tokens.

Manage API Tokens

  1. Click Create API token.
  2. Set the Token name, select Object Read & Write permissions, and choose the bucket you just created.
  3. Click Create API Token.

Create Token

  1. Copy the Access Key ID and Secret Access Key to your .env file:
R2_ACCESS_KEY_ID="YOUR_ACCESS_KEY_ID"
R2_SECRET_ACCESS_KEY="YOUR_SECRET_ACCESS_KEY"

3. Configure CORS Policy

To enable file uploads directly from your application, you must configure the CORS policy.

  1. Go to your Bucket > Settings.
  2. Scroll down to the CORS Policy section and click Edit CORS Policy.

Edit CORS Policy

  1. Paste the following configuration and save:
[
  {
    "AllowedOrigins": ["*"],
    "AllowedMethods": ["PUT", "GET"],
    "AllowedHeaders": ["*"],
    "ExposeHeaders": [],
    "MaxAgeSeconds": 3000
  }
]

Next Steps

Your file upload integration is now complete! You can use the built-in upload actions for user profiles or extend them for other resources like product images or documents.

AlgoliaCustomizations