Upload to Cloudflare R2

This recipe uses Cloudflare R2 for uploading and storing assets in the cloud. Cloudflare R2 is a S3 compatible object storage service that is optimized for performance and cost efficiency.

Technologies

• SvelteKit

• Cloudflare R2

• AWS SDK for JavaScript

How to use

First, start by cloning this folder. We will use  tiged  for cloning subdirectories of Git repositories.

code loading...

Next, install the dependencies:

code loading...

Duplicate the  .env.example  file and rename it to  .env .

Set up Cloudflare R2

We need to create a new bucket in Cloudflare R2 to store our assets. To achieve this, go to the  Cloudflare dashboard , navigate to “ R2 ”, and create a new bucket. You can opt for the option of having Cloudflare automatically place your bucket in the closest region to you, or manually select a region.

Once you have created your bucket, you will need to generate a new access key and secret key for it. From the “R2” dashboard, navigate to “ Manage R2 API Tokens ”, and click on “ Create API Token ”.

Select “ Object Read & Write ” for the permissions, and specify which buckets the API token should have access to.

This will generate an access key and secret key for your bucket. These values need to be updated in the  .env  file.

Here are the other values you will have to update in the  .env  file:

• R2_BUCKET_ENDPOINT : The endpoint for your bucket. You can find this in your newly created bucket settings tab, named “S3 API”. We only need the first part of the URL, without the name of the bucket. So if your endpoint is  https://.r2.cloudflarestorage.com/om-upload-cloudflare-r2 , your  R2_BUCKET_ENDPOINT  value would be  https://.r2.cloudflarestorage.com .

• PUBLIC_BUCKET_NAME: The name of the bucket you created in Cloudflare R2.

• PUBLIC_BUCKET_URL: The URL of your bucket. In your bucket settings tab, you have the option to either use a custom domain for your bucket, or enable a R2.dev subdomain.

Once all the above are done, you also need to update the CORS policies for your bucket. Basically, we want to specify which origins are allowed to access our bucket.

Here is the policy we need to add to our bucket:

code loading...

In this case, we are allowing our bucket to be accessed from localhost and the production URL of our app, for  GET ,  PUT , and  POST  requests.

Run the application

Now that we have set up our bucket and CORS policies, we can run the application.

code loading...

Open your browser and navigate to  http://localhost:5173 . You should see the “Upload to Cloudflare R2” page.