> ## Documentation Index
> Fetch the complete documentation index at: https://chatbotx.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# R2 Configuration

> How to use Cloudflare R2 for file storage

If you do not wish to (or can't) use local storage, an alternative way to upload images is to configure R2. It's free.

<Steps>
  <Step title="Create account and login to the console">
    Go to the [Cloudflare Dashboard](https://dash.cloudflare.com/r2/overview), and register if needed, then login.
  </Step>

  <Step title="Create a new Bucket">
    In the dashboard sidebar, and head to the R2 page.

    <img src="https://mintcdn.com/chatbotx/GGISsHKnmtvJ9rNt/images/4jzqV56W04.png?fit=max&auto=format&n=GGISsHKnmtvJ9rNt&q=85&s=4e2cec520383ef64a0dc541135761451" alt="R2 Page" width="2980" height="996" data-path="images/4jzqV56W04.png" />

    Create a new Bucket.

    * Choose Automatic
    * Choose Standard

    ![Create Bucket](https://github.com/user-attachments/assets/f679ff9f-1a9c-4d09-b663-2fa2baadea93)
  </Step>

  <Step title="Create your R2 Token">
    Create your R2 Token by going to R2 Object Storage:

    ![R2 Object Storage](https://i.imgur.com/yVJwVBb.png)

    Click on the API dropdown, and select [Manage API tokens](https://dash.cloudflare.com/?to=/:account/r2/api-tokens):

    ![Manage API tokens](https://i.imgur.com/PmzyGeQ.png)

    Copy your Account ID for later, and click on "Create an API token":

    ![Create API Token](https://i.imgur.com/hvsGnWI.png)

    Create an Account API token:

    ![Account API Token](https://i.imgur.com/MvZsYfC.png)

    Under "Permissions" choose "Object Read & Write" and under "Specify bucket(s)" search for your created Bucket.

    ![Permissions](https://github.com/user-attachments/assets/30991d43-9920-47d4-9c53-bde619974009)
  </Step>

  <Step title="Copy your credentials">
    After the R2 Token is created, copy your "Access Key ID" and "Secret Access Key":

    ![Copy Credentials](https://github.com/user-attachments/assets/d4b4218f-fe20-47ec-937a-0d516fa74c64)

    Paste the respective information into your .env environment.

    ```env theme={null}
    CLOUDFLARE_ACCOUNT_ID="accountId"
    CLOUDFLARE_ACCESS_KEY="accessKey"
    CLOUDFLARE_SECRET_ACCESS_KEY="secretAccessKey"
    CLOUDFLARE_BUCKETNAME="bucketName"
    CLOUDFLARE_REGION="region (like wnam)"
    ```
  </Step>

  <Step title="Configure Custom Domain and CORS policies">
    Go to configuration and connect a custom domain (if you don't have one, you can use the one that CloudFlare provides.) Add it to your .env file.

    ```env theme={null}
    CLOUDFLARE_BUCKET_URL="https://customdomain.com"
    ```

    ![Custom Domain](https://github.com/user-attachments/assets/a7bff532-f69b-4095-bb66-e46b7d3b14bd)

    Click to edit the CORS policy and add the following JSON:

    ```json theme={null}
    [
      {
        "AllowedOrigins": [
          "http://localhost:4200",
          "https://yourDomain.com"
        ],
        "AllowedMethods": [
          "GET",
          "POST",
          "HEAD",
          "PUT",
          "DELETE"
        ],
        "AllowedHeaders": [
          "Authorization",
          "x-amz-date",
          "x-amz-content-sha256",
          "content-type"
        ],
        "ExposeHeaders": [
          "ETag",
          "Location"
        ],
        "MaxAgeSeconds": 3600
      }
    ]
    ```

    ![CORS Policy](https://github.com/user-attachments/assets/1f84fe71-dd2d-4ca6-92bf-6193d36c9b54)
  </Step>
</Steps>