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

I uploaded a file using the

PutObjectCommand

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

https://<some_value>.r2.com/path/to/file

Erisa•6/15/24, 4:26 PM

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

Erisa•6/15/24, 4:26 PM

You may need to adjust CORS settings for the bucket

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

BaranOP•6/15/24, 4:38 PM

Can I add my localhost as a custom domain?

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

BaranOP•6/15/24, 6:20 PM

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"
    ]
  }
]

[
  {
    "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

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:

BaranOP•6/15/24, 6:24 PM

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

https://e303-dk-preview.10588302399247a4add0cce49f3d28ee.r2.cloudflarestorage.com/digital-business-card/sjDArZdvLt9uftQipAyY.png

, I get this:

BaranOP•6/15/24, 6:24 PM

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

Erisa•6/15/24, 6:55 PM

You signed a PutObject operation and then tried to perform a GetObject, change it to sign a GetObject instead

Erisa•6/15/24, 6:55 PM

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

BaranOP•6/15/24, 7:04 PM

EErisa You signed a PutObject operation and then tried to perform a GetObject, change i...

BaranOP•6/15/24, 7:05 PM

thank you, I managed to solve the issue. I found the conversation very helpful. I hope you have a great rest of the day.

EErisa You signed a PutObject operation and then tried to perform a GetObject, change i...

BaranOP•6/15/24, 10:38 PM

hey, it's me again. My getObject signed URLs are expiring. I saw that the latest expiry date is 1 week. What is the optimum workflow to keep a getObject signed URL in the database to retrieve images?

I was thinking of

server

get url in db
check if it has expired
- if so, get another signed url
- if not, display signed url

is this the ideal approach?

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

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

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

server

Similar Threads

Similar Threads

server

Similar Threads