kinda weird tbh

N

nikiv.devOP•5/1/24, 2:11 PM

like cloudflare focuses on dx, I can see many ways to make this flow easier

Nnikiv.dev kinda weird tbh

C

Chaika•5/1/24, 2:11 PM

well the normal cf api has rate limits (1200 requests/5 minutes) and strict upload limits (iirc 500 mb)

C

Chaika•5/1/24, 2:11 PM

it's shared among all teams, and they're working on more granular rate limiting but nothing yet

C

Chaika•5/1/24, 2:12 PM

probably at least part of the reason they want to push you to using the s3 api which has no rate limits and just the r2 max upload max of 5gb before having to use multipart

C

Chaika•5/1/24, 2:12 PM

plus if you go the s3 way it's better anyway imo because less vendor lock in, could always switch out with another provider

CChaika well the normal cf api has rate limits (1200 requests/5 minutes) and strict uplo...

S

Sam•5/1/24, 2:13 PM

Also wouldn't the S3 api be faster on large scale? Since you won't be going through another layer of servers.

N

nikiv.devOP•5/1/24, 2:13 PM

makes sense

SSam Also wouldn't the S3 api be faster on large scale? Since you won't be going thro...

C

Chaika•5/1/24, 2:14 PM

iirc the CF API's base auth stuff is just a worker, and so is the s3 compat stuff (for example, they Single URL Purge is just Durable Objects and Workers and has never gone down during their core outages)

C

Chaika•5/1/24, 2:14 PM

possible they're still sending all the rest api r2 requests to core and then to the r2 bucket, but I don't think it necessarily has to be slower

N

nikiv.devOP•5/1/24, 2:15 PM

i should get a job in dx of cloudflare

N

nikiv.devOP•5/1/24, 2:15 PM

ok let me search it another way

C

Chaika•5/1/24, 2:15 PM

your account id is on the right side of your r2 overview

C

Chaika•5/1/24, 2:16 PM

or it's the uuid in the url of the dashboard, ex: https://dash.cloudflare.com/b9e510810e1e12fcd40826d266a1fb12/r2/overview
b9e510810e1e12fcd40826d266a1fb12 being the acct id in that example. They're not private or anything

N

nikiv.devOP•5/1/24, 2:20 PM

trying to find nice way to turn

.jpeg

.jpeg

.jpeg

.jpeg into blob

N

nikiv.devOP•5/1/24, 2:20 PM

anyone know perhaps?

N

nikiv.devOP•5/1/24, 2:21 PM

all google answers are odd, some old apis with xml thing

N

nikiv.devOP•5/1/24, 2:21 PM

https://stackoverflow.com/questions/42471755/convert-image-into-blob-using-javascript

Stack Overflow

convert image into blob using javascript

I use promise to download an image and get the image data like:

promise.downloadFile().then(function(image){
//do something
});
I have got the image, which is like:

<img n...

N

nikiv.devOP•5/1/24, 2:21 PM

like

N

nikiv.devOP•5/1/24, 2:21 PM

N

nikiv.devOP•5/1/24, 2:21 PM

like i want something like this

N

nikiv.devOP•5/1/24, 2:21 PM

https://github.com/maccman/cloudflare-r2-edge

GitHub

GitHub - maccman/cloudflare-r2-edge

Contribute to maccman/cloudflare-r2-edge development by creating an account on GitHub.

N

nikiv.devOP•5/1/24, 2:21 PM

N

nikiv.devOP•5/1/24, 2:21 PM

or i drop this lib

N

nikiv.devOP•5/1/24, 2:22 PM

i just want clean api to upload, get from r2

N

nikiv.devOP•5/1/24, 2:22 PM

in ts

N

nikiv.devOP•5/1/24, 2:22 PM

N

nikiv.devOP•5/1/24, 2:23 PM

looking up what type

File

File

File

File is

N

nikiv.devOP•5/1/24, 2:23 PM

maybe I can get that thing via fetch and pass that

N

nikiv.devOP•5/1/24, 2:24 PM

trying

N

nikiv.devOP•5/1/24, 2:25 PM

ah it wants filename tho

N

nikiv.devOP•5/1/24, 2:25 PM

i wanted to do it in memory

Nnikiv.dev trying

H

Hello, I’m Allie!•5/1/24, 2:25 PM

You can also just pass an ArrayBuffer

H

Hello, I’m Allie!•5/1/24, 2:25 PM

It will complain the types don’t match

H

Hello, I’m Allie!•5/1/24, 2:25 PM

But should still work

N

nikiv.devOP•5/1/24, 2:28 PM

holy that worked

N

nikiv.devOP•5/1/24, 2:28 PM

and you are right on the types

N

nikiv.devOP•5/1/24, 2:28 PM

  try {
    const response = await fetch(
      "https://avatars.githubusercontent.com/u/6391776?v=4s",
    )
    if (!response.ok) throw new Error("Network response was not ok")

    const blob = await response.blob()
    const arrayBuffer = await blob.arrayBuffer()
    await client.put("github-profile", arrayBuffer)
  } catch (error) {
    console.error("Error fetching the image:", error)
  }

  try {
    const response = await fetch(
      "https://avatars.githubusercontent.com/u/6391776?v=4s",
    )
    if (!response.ok) throw new Error("Network response was not ok")

    const blob = await response.blob()
    const arrayBuffer = await blob.arrayBuffer()
    await client.put("github-profile", arrayBuffer)
  } catch (error) {
    console.error("Error fetching the image:", error)
  }

  try {
    const response = await fetch(
      "https://avatars.githubusercontent.com/u/6391776?v=4s",
    )
    if (!response.ok) throw new Error("Network response was not ok")

    const blob = await response.blob()
    const arrayBuffer = await blob.arrayBuffer()
    await client.put("github-profile", arrayBuffer)
  } catch (error) {
    console.error("Error fetching the image:", error)
  }

  try {
    const response = await fetch(
      "https://avatars.githubusercontent.com/u/6391776?v=4s",
    )
    if (!response.ok) throw new Error("Network response was not ok")

    const blob = await response.blob()
    const arrayBuffer = await blob.arrayBuffer()
    await client.put("github-profile", arrayBuffer)
  } catch (error) {
    console.error("Error fetching the image:", error)
  }

N

nikiv.devOP•5/1/24, 2:28 PM

anyone know how to make it type happy?

N

nikiv.devOP•5/1/24, 2:28 PM

and do same

Nnikiv.dev anyone know how to make it type happy?

H

Hello, I’m Allie!•5/1/24, 2:29 PM

I would fork the package. No idea why they make it only accept File | Blob

H

Hello, I’m Allie!•5/1/24, 2:29 PM

/ Make a PR

N

nikiv.devOP•5/1/24, 3:00 PM

N

nikiv.devOP•5/1/24, 3:00 PM

how can I get the url for a given key in r2

N

nikiv.devOP•5/1/24, 3:00 PM

i need it to actually show the images in my web app

N

nikiv.devOP•5/1/24, 3:00 PM

i can't just pass the blob etc. in component apparently

N

nikiv.devOP•5/1/24, 3:09 PM

i connected domain to r2 bucket

N

nikiv.devOP•5/1/24, 3:10 PM

this

N

nikiv.devOP•5/1/24, 3:10 PM

returns

https://kuskus.e1a1737083ffd849ad2638b7e6069dec.r2.cloudflarestorage.com/github-profile?X-Amz-Expires=3600&X-Amz-Date=20240501T150941Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=4b9db796d0eecc94ddc55e4681d21b0b%2F20240501%2Fauto%2Fs3%2Faws4_request&X-Amz-SignedHeaders=accept-encoding%3Bhost&X-Amz-Signature=379f324c8c9d25897286c136b774782298cf9c1981fcd62a76fec807eee3b43a

https://kuskus.e1a1737083ffd849ad2638b7e6069dec.r2.cloudflarestorage.com/github-profile?X-Amz-Expires=3600&X-Amz-Date=20240501T150941Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=4b9db796d0eecc94ddc55e4681d21b0b%2F20240501%2Fauto%2Fs3%2Faws4_request&X-Amz-SignedHeaders=accept-encoding%3Bhost&X-Amz-Signature=379f324c8c9d25897286c136b774782298cf9c1981fcd62a76fec807eee3b43a

https://kuskus.e1a1737083ffd849ad2638b7e6069dec.r2.cloudflarestorage.com/github-profile?X-Amz-Expires=3600&X-Amz-Date=20240501T150941Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=4b9db796d0eecc94ddc55e4681d21b0b%2F20240501%2Fauto%2Fs3%2Faws4_request&X-Amz-SignedHeaders=accept-encoding%3Bhost&X-Amz-Signature=379f324c8c9d25897286c136b774782298cf9c1981fcd62a76fec807eee3b43a

https://kuskus.e1a1737083ffd849ad2638b7e6069dec.r2.cloudflarestorage.com/github-profile?X-Amz-Expires=3600&X-Amz-Date=20240501T150941Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=4b9db796d0eecc94ddc55e4681d21b0b%2F20240501%2Fauto%2Fs3%2Faws4_request&X-Amz-SignedHeaders=accept-encoding%3Bhost&X-Amz-Signature=379f324c8c9d25897286c136b774782298cf9c1981fcd62a76fec807eee3b43a

N

nikiv.devOP•5/1/24, 3:10 PM

which is not public access still

N

nikiv.devOP•5/1/24, 3:10 PM

i don't get how to get public access url to my object

Similar Threads

Similar Threads

Similar Threads