#Fetching R2 blob on the client-side (skipping server)

11 messages · Page 1 of 1 (latest)

coarse wigeon
#

I uploaded a file using the PutObjectCommand method. It's a public file. I want to access this file on the client-side (by skipping the server). So, I thought of getting the file by fetching the URL, but I don't know the file's URL.

Would you recommend this approach to get the image URL?

  • If so, how can I get/construct the URL?
  • If not, what would you recommend doing instead?

E.g., https://<some_value>.r2.com/path/to/file?

stray anvil
#

If you link a custom domain then you can fetch the file from that custom domain

#

You may need to adjust CORS settings for the bucket

coarse wigeon
coarse wigeon
# stray anvil If you link a custom domain then you can fetch the file from that custom domain

When I navigate to my bucket using the Cloudflare web UI and download the image, I can see the image.

I edited the CORS policy of the R2 so the image can be retrieved/get from anywhere:

[
  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "GET"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "ExposeHeaders": [
      "ETag"
    ]
  },
  {
    "AllowedOrigins": [
      "http://localhost:3000"
    ],
    "AllowedMethods": [
      "PUT"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "ExposeHeaders": [
      "ETag"
    ]
  }
]

This is my signed URL:
https://e303-dk-preview.10588302399247a4add0cce49f3d28ee.r2.cloudflarestorage.com/digital-business-card/sjDArZdvLt9uftQipAyY.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=11e23872c93e9e4d41ff5c0334e816ed%2F20240615%2Fauto%2Fs3%2Faws4_request&X-Amz-Date=20240615T181812Z&X-Amz-Expires=900&X-Amz-Signature=d25e3fb9ea0102eac375bbf02c9891a372f2a90c7db59ec71055d4e0aea1dd25&X-Amz-SignedHeaders=content-length%3Bhost&x-id=PutObject

When I accessed the URL, I expected to see the image. However, this is what I see:

image.png
#

Perhaps the signed URL is for putting the image, meanwhile I am trying to get it.

When I search https://e303-dk-preview.10588302399247a4add0cce49f3d28ee.r2.cloudflarestorage.com/digital-business-card/sjDArZdvLt9uftQipAyY.png, I get this:

stray anvil
#

If the files are public you can skip all the signing by just adding a custom domain.

coarse wigeon
#

ah

coarse wigeon