Hello, I'd like to expose my bucket as read only on internet. So I'm about to connect a custom domai

A

AlaanorOP•1/18/24, 4:41 PM

ok I went with a subdomain. We'll see what happens.

AAlaanor Hello, I'd like to expose my bucket as read only on internet. So I'm about to co...

H

Hello, I’m Allie!•1/18/24, 4:43 PM

Either should be fine. It is up to you and where you want to put it

Lltdevv If I clean the cache then I correctly receive a 200, but I want to use the cache...

Ɽ

ⱤØ₥₳₦•1/18/24, 4:45 PM

Use allow origin response header

A

AlaanorOP•1/18/24, 4:48 PM

Do I need to create a worker if to give anyone access to my bucket file (readonly) on internet or is there something already built by default (like a cdn or smth). I'm a little confused

A

AlaanorOP•1/18/24, 4:50 PM

Public buckets are available on a regular HTTP endpoint. By default, there is no authorization or access controls associated with a public bucket. Anyone with a public bucket URL can access an object in that public bucket

Seem like it can by default, I just need to figure what url that would be

A

AlaanorOP•1/18/24, 4:51 PM

nvm I found !

A

AlaanorOP•1/18/24, 4:51 PM

awesome

J

justaname•1/18/24, 10:05 PM

is there a rust package to use r2 and kv without wrangler?

U

Unsmart•1/18/24, 10:06 PM

R2 can be used with an s3 compatable sdk. KV you either need to go through a cloudflare worker or the rest api.

U

Unsmart•1/18/24, 10:07 PM

and the rest api is not recommended

J

justaname•1/18/24, 10:27 PM

is there a reason for it being so tied in with workers? and not recommended to use the rest api?

E

ElGovanni•1/18/24, 10:44 PM

Can we expect ACL in R2? It's really annoying I cannot set specific files in public bucket as private :/

N

Nightelf9•1/19/24, 11:33 AM

hello - im trying to get started with simply showing a picture that i have in my bucket (ive been able to do it with another site but all the images in the public were public which im trying to avoid this time round)

im using cloudflare pages and linked to a github repository
i have made a html file to show an image of a panda and the html links to a javascript.js

the panda image is in my bucket - ive made the link between the page and the bucket - the bucket variable is called PANDA_BUCKET

async function getPandaImage(context) {
    try {
        const obj = await context.env.PANDA_BUCKET.get('baby panda.JPEG');
        
        if (obj === null) {
            console.log('Image not found');
            return new Response('Not found', { status: 404 });
        }

        console.log('Image found:', obj);

        return new Response(obj.body);
    } catch (error) {
        console.error('Error fetching Panda image:', error);
        return new Response('Internal Server Error', { status: 500 });
    }
}

async function getPandaImage(context) {
    try {
        const obj = await context.env.PANDA_BUCKET.get('baby panda.JPEG');
        
        if (obj === null) {
            console.log('Image not found');
            return new Response('Not found', { status: 404 });
        }

        console.log('Image found:', obj);

        return new Response(obj.body);
    } catch (error) {
        console.error('Error fetching Panda image:', error);
        return new Response('Internal Server Error', { status: 500 });
    }
}

async function getPandaImage(context) {
    try {
        const obj = await context.env.PANDA_BUCKET.get('baby panda.JPEG');
        
        if (obj === null) {
            console.log('Image not found');
            return new Response('Not found', { status: 404 });
        }

        console.log('Image found:', obj);

        return new Response(obj.body);
    } catch (error) {
        console.error('Error fetching Panda image:', error);
        return new Response('Internal Server Error', { status: 500 });
    }
}

async function getPandaImage(context) {
    try {
        const obj = await context.env.PANDA_BUCKET.get('baby panda.JPEG');
        
        if (obj === null) {
            console.log('Image not found');
            return new Response('Not found', { status: 404 });
        }

        console.log('Image found:', obj);

        return new Response(obj.body);
    } catch (error) {
        console.error('Error fetching Panda image:', error);
        return new Response('Internal Server Error', { status: 500 });
    }
}

heres the link
https://my-panda-app.pages.dev/

im not getting anything in the console for some reason

D

devrunner•1/19/24, 11:36 AM

Is it possible to get an image from the R2 storage using the Workers and resize it as well?

Original message was deleted

N

Nightelf9•1/19/24, 11:38 AM

im not using cloudflares workers, everythings in the github repository

D

devrunner•1/19/24, 11:38 AM

I can't use sharp or canvas though (I looked at pica), so is there a go-to library for that?

D

devrunner•1/19/24, 11:39 AM

I thought I could maybe use the cf worker options similarly to how you can when you fetch an image

D

devrunner•1/19/24, 11:39 AM

https://developers.cloudflare.com/images/image-resizing/resize-with-workers/

Resize with Cloudflare Workers · Cloudflare Image Optimization docs

Using Image Resizing with Workers gives you powerful programmatic control over every image request.

A

Azru•1/19/24, 12:05 PM

Hello, i've this error when fetching image from R2 bucket using

fetch(imageUrl);

fetch(imageUrl);

fetch(imageUrl);

fetch(imageUrl);

Access to fetch at 'https://****-5fde8e1e86a2.jpg' from origin 'http://localhost:5000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Access to fetch at 'https://****-5fde8e1e86a2.jpg' from origin 'http://localhost:5000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Access to fetch at 'https://****-5fde8e1e86a2.jpg' from origin 'http://localhost:5000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Access to fetch at 'https://****-5fde8e1e86a2.jpg' from origin 'http://localhost:5000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

This my CORS policy :

[
  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "GET",
      "HEAD",
      "POST",
      "PUT"
    ],
    "AllowedHeaders": [
      "*"
    ]
  }
]

[
  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "GET",
      "HEAD",
      "POST",
      "PUT"
    ],
    "AllowedHeaders": [
      "*"
    ]
  }
]

[
  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "GET",
      "HEAD",
      "POST",
      "PUT"
    ],
    "AllowedHeaders": [
      "*"
    ]
  }
]

[
  {
    "AllowedOrigins": [
      "*"
    ],
    "AllowedMethods": [
      "GET",
      "HEAD",
      "POST",
      "PUT"
    ],
    "AllowedHeaders": [
      "*"
    ]
  }
]

B

Big Al•1/19/24, 4:38 PM

I am using AWS SDK V3 to upload/fetch files from R2. I am testing out the CreateBucketCommand and the ListBucketsCommand.
I am receiving these responses from both methods but no data:
response1= {
'$metadata': {
httpStatusCode: 200,
requestId: undefined,
extendedRequestId: undefined,
cfId: undefined,
attempts: 1,
totalRetryDelay: 0
}
}

I also added 'forcePathStyle: true' to the config which fixed the previous error of 'NoSuchBucket' when trying to create a bucket,
not sure how or why I had to do that. I've also tested this with AWS S3 and it creates the buckets and lists the buckets with no problems.

The code:

const options = {
  region: 'us-east-1',
  accessKeyId: process.env.ACCESS_KEY_ID!,
  secretAccessKey: process.env.SECRET_ACCESS_KEY!,
  endpoint: process.env.S3_ENDPOINT!,
  bucketName: 'test-bucket-1234-abcd-5678-efgh',
  maxFileSize: 10,
  validMimeType: [],
  format: 'url',
  urlExpiration: 10,
  path: path.join(__dirname, 'downloads')
};

describe('s3Controller', () => {
  it('should create a bucket', async () => {
    const input = {
      Bucket: options.bucketName,
    };

    try {
      const command = new CreateBucketCommand(input);
      const response = await client.send(command);
      console.log('response1=', response);

    } catch(err) {
      console.log('err=', err);
    }
    expect(response).toEqual({});
  });
});

describe('s3Controller', () => {
  it('should list buckets', async () => {

    try {
      const command = new ListBucketsCommand('');
      const response = await client.send(command);
      console.log('response2=', response);

    } catch(err) { 
      console.log('err=', err);
    }
    expect(response).toEqual({});
  });
});

const options = {
  region: 'us-east-1',
  accessKeyId: process.env.ACCESS_KEY_ID!,
  secretAccessKey: process.env.SECRET_ACCESS_KEY!,
  endpoint: process.env.S3_ENDPOINT!,
  bucketName: 'test-bucket-1234-abcd-5678-efgh',
  maxFileSize: 10,
  validMimeType: [],
  format: 'url',
  urlExpiration: 10,
  path: path.join(__dirname, 'downloads')
};

describe('s3Controller', () => {
  it('should create a bucket', async () => {
    const input = {
      Bucket: options.bucketName,
    };

    try {
      const command = new CreateBucketCommand(input);
      const response = await client.send(command);
      console.log('response1=', response);

    } catch(err) {
      console.log('err=', err);
    }
    expect(response).toEqual({});
  });
});

describe('s3Controller', () => {
  it('should list buckets', async () => {

    try {
      const command = new ListBucketsCommand('');
      const response = await client.send(command);
      console.log('response2=', response);

    } catch(err) { 
      console.log('err=', err);
    }
    expect(response).toEqual({});
  });
});

const options = {
  region: 'us-east-1',
  accessKeyId: process.env.ACCESS_KEY_ID!,
  secretAccessKey: process.env.SECRET_ACCESS_KEY!,
  endpoint: process.env.S3_ENDPOINT!,
  bucketName: 'test-bucket-1234-abcd-5678-efgh',
  maxFileSize: 10,
  validMimeType: [],
  format: 'url',
  urlExpiration: 10,
  path: path.join(__dirname, 'downloads')
};

describe('s3Controller', () => {
  it('should create a bucket', async () => {
    const input = {
      Bucket: options.bucketName,
    };

    try {
      const command = new CreateBucketCommand(input);
      const response = await client.send(command);
      console.log('response1=', response);

    } catch(err) {
      console.log('err=', err);
    }
    expect(response).toEqual({});
  });
});

describe('s3Controller', () => {
  it('should list buckets', async () => {

    try {
      const command = new ListBucketsCommand('');
      const response = await client.send(command);
      console.log('response2=', response);

    } catch(err) { 
      console.log('err=', err);
    }
    expect(response).toEqual({});
  });
});

const options = {
  region: 'us-east-1',
  accessKeyId: process.env.ACCESS_KEY_ID!,
  secretAccessKey: process.env.SECRET_ACCESS_KEY!,
  endpoint: process.env.S3_ENDPOINT!,
  bucketName: 'test-bucket-1234-abcd-5678-efgh',
  maxFileSize: 10,
  validMimeType: [],
  format: 'url',
  urlExpiration: 10,
  path: path.join(__dirname, 'downloads')
};

describe('s3Controller', () => {
  it('should create a bucket', async () => {
    const input = {
      Bucket: options.bucketName,
    };

    try {
      const command = new CreateBucketCommand(input);
      const response = await client.send(command);
      console.log('response1=', response);

    } catch(err) {
      console.log('err=', err);
    }
    expect(response).toEqual({});
  });
});

describe('s3Controller', () => {
  it('should list buckets', async () => {

    try {
      const command = new ListBucketsCommand('');
      const response = await client.send(command);
      console.log('response2=', response);

    } catch(err) { 
      console.log('err=', err);
    }
    expect(response).toEqual({});
  });
});

Any help would be much appreciated.

B

Big Al•1/19/24, 5:40 PM

I followed the example layed out here: https://developers.cloudflare.com/r2/examples/aws/aws-sdk-js-v3/
Is there any further documentation on aws sdk v3 besides that?

aws-sdk-js-v3 · Cloudflare R2 docs

You must generate an Access Key before getting started. All examples will utilize access_key_id and access_key_secret variables which represent the …

BBig Al I am using AWS SDK V3 to upload/fetch files from R2. I am testing out the Create...

Ɽ

ⱤØ₥₳₦•1/19/24, 5:50 PM

Thanks for idea

now I'll use Lambada edge function to upload gigantic files to R2

B

Barry_Based_Benson•1/19/24, 7:22 PM

Does generating a presigned url count as an operation? If so which one? A or B?

BBarry_Based_Benson Does generating a presigned url count as an operation? If so which one? A or B?

K

Karew•1/19/24, 7:24 PM

Presigning does not involve the server, it doesn’t cost anything

B

Barry_Based_Benson•1/19/24, 7:25 PM

But isn't the file content served by cloudflare? Doesn't it count as a read operation?

B

Barry_Based_Benson•1/19/24, 7:25 PM

@Karew

U

Unsmart•1/19/24, 7:27 PM

Generating a presigned url doesnt ever touch cloudflare. But when you actually go to the presigned url it will do whatever operation you told it and count

K

Karew•1/19/24, 7:27 PM

You asked about presigning. Your local S3 client presigns an unsent request. It doesn’t cost anything to presign. It only costs an operation if someone actually makes the request

E

Erisa•1/19/24, 8:57 PM

And then the type of operation charged depends on the type of request you created and used

A

Artefactoid•1/20/24, 12:10 AM

I just had a somewhat, um, weird experience with adding an R2 subscription. When I looked at my Billing Subscriptions, R2 was enabled. But when I attempted to configure it, all I got was the R2 intro funnel page with a big blue button asking me if wanted to add it to my subscriptions. Then I went to cancel the subscription. Only once it was canceled could I then access the actual R2 control panel. But it seems like I can't resubscribe to R2 now. Who should I be asking for help to be allowed to resubscribe to R2? TIA.

K

kian•1/20/24, 1:04 PM

I’ll take a look in 5 - there was an issue where the error is wrong for multi part uploads but I think that was fixed

K

kian•1/20/24, 1:11 PM

Did you test it w/ the example folder in the repo?

K

kian•1/20/24, 1:15 PM

How comes your logs don't have a remaining part? meowthinking

K

kian•1/20/24, 1:15 PM

Ah

K

kian•1/20/24, 1:20 PM

Good point

K

kian•1/20/24, 1:21 PM

timingSafeEqual is the same, where you need to encode the text beforehand and the two buffers have to be the same length but that means you can't rely on

string.length

string.length

K

kian•1/20/24, 1:21 PM

> "a".length
1
> "à".length
1
> new TextEncoder().encode("a").byteLength
1
> new TextEncoder().encode("à").byteLength
2

> "a".length
1
> "à".length
1
> new TextEncoder().encode("a").byteLength
1
> new TextEncoder().encode("à").byteLength
2

> "a".length
1
> "à".length
1
> new TextEncoder().encode("a").byteLength
1
> new TextEncoder().encode("à").byteLength
2

> "a".length
1
> "à".length
1
> new TextEncoder().encode("a").byteLength
1
> new TextEncoder().encode("à").byteLength
2

K

kian•1/20/24, 1:21 PM

This lovely stuff

K

kian•1/20/24, 1:23 PM

This is in OP's GitHub bio so it's possible meowlul

K

kian•1/20/24, 1:36 PM

I tested with

and

à

à

& that does seem to be the issue

K

kian•1/20/24, 1:36 PM

that's not very fun

K

kian•1/20/24, 1:48 PM

Yeah, I don't think you need to consider the plan

K

kian•1/20/24, 8:59 PM

You'd need to see the request/response that fails specifically to be able to tell what's going wrong

E

Ercan•1/21/24, 6:23 PM

Hi all!

We have been trying to find a way to how to migrate from Cloudflare images to R2, the reason is cloudflare images is becoming so pricey with a large amount of images. And this will not be scalable. Can someone help us figure out what kind of process we should follow for this. And we are also not happy with the cloudflare images because we did not realize it would be this much vendor lock in.

If someone knows a way for this cloudflare images to R2 migration, that would help us a lot. As we see, there is no API or way to export all image from cloudflare images, and dump it into r2 etc.

Original message was deleted

E

Ercan•1/21/24, 8:29 PM

Thank you Daniel!

Original message was deleted

E

Ercan•1/21/24, 8:30 PM

Thank you as well for providing the example!

E

Ercan•1/21/24, 8:32 PM

And @nora another question, to migrate all images, I will basically need to fetch every single image and put it on r2, and I believe this will be reflected in the billing for "Delivered Image" count for cloudflare images right? I am gonna migrate around 10M+ images.

Hello, I'd like to expose my bucket as read only on internet. So I'm about to connect a custom domai

Similar Threads

Similar Threads

Similar Threads