As I'm researching options for accepting untrusted file uploads, r2 is an option we're exploring. Is

Kkcbrewron As I'm researching options for accepting untrusted file uploads, r2 is an option...

K

kcbrewronOP•2/16/24, 6:16 PM

It looks as of this is only an option if the file passes through the zero trust and gateway products under certain circumstances

K

kian•2/16/24, 6:47 PM

Yeah, R2 doesn't have anything for that.

K

kian•2/16/24, 6:48 PM

The usual flow (i.e the one that GCP recommends) is you have a unscanned bucket for uploads and then a process that will pull the file, scan it and move it to a clean/quarantine bucket.

N

Nbc66•2/16/24, 7:26 PM

so i got a realy big noob question
if i setup a custom domain on a r2 bucket does that mean i can no longer use that domain as an apex domain for a website?

example if i have a github page will i no longer be abel to host a website using the apex domain so i can no longer just acess domain.com

i can only acess the r2 bucket from it then correct?

N

Nbc66•2/16/24, 7:27 PM

or is it also possible to configure the domain to just have acess to the r2 bucket on the

domain.com/r2/

domain.com/r2/

domain.com/r2/

domain.com/r2/ route? @Community Champion

D

digitalpoint•2/16/24, 7:35 PM

@Nbc66 you can use the same "domain" for multiple things, just not the exact same hostname. So for example you can't use the apex domain for both an R2 bucket and a website (have to pick one or the other).

Think of how that would actually work... you want to go to a example.com, DNS looks up the IP address for example.com and routes to the correct server. Your "server" (and therefore the IP address) is going to be different if it's a website vs. your R2 bucket.

For the public domain assigned to an R2 bucket, I tend to use a subdomain for that bucket... media.example.com, cdn.example.com, data.example.com, etc.

N

Nbc66•2/16/24, 7:35 PM

ahh so i can do it that way aswell i see

N

Nbc66•2/16/24, 7:35 PM

thank you

G

Garrett•2/16/24, 8:50 PM

I'm using the API to create new buckets and I need to additionally allow public access for each created bucket. Is there an API for configuring public access on a buket?

G

Garrett•2/16/24, 8:53 PM

Yeah I was just looking at the network calls made from the browser.

G

Garrett•2/16/24, 8:53 PM

Is there an item on the roadmap to finish the R2 API in this regard?

G

Garrett•2/16/24, 9:05 PM

Lol okay - not sure how much inside info anyone has here. Incidentally, this appears to be supported but is not documented. It's a PUT request to

<API board URL>/policy

<API board URL>/policy

<API board URL>/policy

<API board URL>/policy

J

Jpo•2/17/24, 5:35 AM

I have a short 15 second video I want to play in the hero / header of my site. Will simply video tag directly srcing to r2 suffice, or do i need to look into cloudflare streaming or other products. Previous projects I’ve only used mux, but this is a startup that I’m funding out of pocket so trying to keep costs as low as possible and use as few third-parties as possible. Already using r2 for image storage so figured this would be easiest, but don’t want to spend time building it if it’s not a scalable solution.

A

alka_99•2/17/24, 7:10 AM

Hi guys

new here in cloudflare stuff
i try to build webpage that i want to upload my image or any other files to cloudflare r2. however i got an issues where:

Access to fetch at 'https://property-image.5ccaf923a211272cb29f4f76f561a3d2.r2.cloudflarestorage.com/1708152452157-rekap-all-va-ecoll-per-jan-2022-okt-2023-xlsx?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=2ac1e54a60f8a09c9f63ac0b836fa420%2F20240217%2Fauto%2Fs3%2Faws4_request&X-Amz-Date=20240217T064732Z&X-Amz-Expires=300&X-Amz-Signature=ce850f7f970893fbe32f4a71a504ba6fe458658bc6c942ee4d1e2de3ad760159&X-Amz-SignedHeaders=host&x-amz-acl=public-read&x-id=PutObject' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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://property-image.5ccaf923a211272cb29f4f76f561a3d2.r2.cloudflarestorage.com/1708152452157-rekap-all-va-ecoll-per-jan-2022-okt-2023-xlsx?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=2ac1e54a60f8a09c9f63ac0b836fa420%2F20240217%2Fauto%2Fs3%2Faws4_request&X-Amz-Date=20240217T064732Z&X-Amz-Expires=300&X-Amz-Signature=ce850f7f970893fbe32f4a71a504ba6fe458658bc6c942ee4d1e2de3ad760159&X-Amz-SignedHeaders=host&x-amz-acl=public-read&x-id=PutObject' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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://property-image.5ccaf923a211272cb29f4f76f561a3d2.r2.cloudflarestorage.com/1708152452157-rekap-all-va-ecoll-per-jan-2022-okt-2023-xlsx?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=2ac1e54a60f8a09c9f63ac0b836fa420%2F20240217%2Fauto%2Fs3%2Faws4_request&X-Amz-Date=20240217T064732Z&X-Amz-Expires=300&X-Amz-Signature=ce850f7f970893fbe32f4a71a504ba6fe458658bc6c942ee4d1e2de3ad760159&X-Amz-SignedHeaders=host&x-amz-acl=public-read&x-id=PutObject' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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://property-image.5ccaf923a211272cb29f4f76f561a3d2.r2.cloudflarestorage.com/1708152452157-rekap-all-va-ecoll-per-jan-2022-okt-2023-xlsx?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=2ac1e54a60f8a09c9f63ac0b836fa420%2F20240217%2Fauto%2Fs3%2Faws4_request&X-Amz-Date=20240217T064732Z&X-Amz-Expires=300&X-Amz-Signature=ce850f7f970893fbe32f4a71a504ba6fe458658bc6c942ee4d1e2de3ad760159&X-Amz-SignedHeaders=host&x-amz-acl=public-read&x-id=PutObject' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.

not sure why this is happening

A

alka_99•2/17/24, 7:10 AM

im using sveltekit and follows this tutorial https://www.okupter.com/blog/upload-files-cloudflare-r2-in-sveltekit

How to upload files to Cloudflare R2 in SvelteKit

Dive into our step-by-step guide to master file uploads in Cloudflare R2 with SvelteKit. Learn about the R2 service, set up projects, and optimize your cloud storage experience!

A

alka_99•2/17/24, 7:12 AM

here is my +page.svelte

<script lang="ts">
    import Dashboard from '@uppy/dashboard';
    import Uppy from '@uppy/core';
    import '@uppy/core/dist/style.css';
    import '@uppy/dashboard/dist/style.css';
    import { onMount } from 'svelte';

    const handleFileUpload = async (e: Event) => {
        const target = e.target as HTMLInputElement;
        const file = target.files?.[0];

        if (file) {
            const getPresignedUrlResponse = await fetch('/api/upload', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    fileName: file.name,
                    fileType: file.type
                })
            });

            if (!getPresignedUrlResponse.ok) {
                console.error('Failed to get presigned URL');
            }

            const { presignedUrl, objectKey } = await getPresignedUrlResponse.json();
            const uploadToR2Response = await fetch(presignedUrl, {
                method: 'PUT',
                headers: {
                    'Content-Type': file.type
                },
                body: file
            });
            if (!uploadToR2Response.ok) {
                console.error('Failed to upload file to R2');
            }
        }
    };

    
</script>

<main class="mx-auto">
    <div class="container h-screen w-full">
        <!-- <div id="dashboard" on:change={handleFileUpload}></div> -->
        <input type="file" on:change={handleFileUpload}/>
    </div>
</main>

<script lang="ts">
    import Dashboard from '@uppy/dashboard';
    import Uppy from '@uppy/core';
    import '@uppy/core/dist/style.css';
    import '@uppy/dashboard/dist/style.css';
    import { onMount } from 'svelte';

    const handleFileUpload = async (e: Event) => {
        const target = e.target as HTMLInputElement;
        const file = target.files?.[0];

        if (file) {
            const getPresignedUrlResponse = await fetch('/api/upload', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    fileName: file.name,
                    fileType: file.type
                })
            });

            if (!getPresignedUrlResponse.ok) {
                console.error('Failed to get presigned URL');
            }

            const { presignedUrl, objectKey } = await getPresignedUrlResponse.json();
            const uploadToR2Response = await fetch(presignedUrl, {
                method: 'PUT',
                headers: {
                    'Content-Type': file.type
                },
                body: file
            });
            if (!uploadToR2Response.ok) {
                console.error('Failed to upload file to R2');
            }
        }
    };

    
</script>

<main class="mx-auto">
    <div class="container h-screen w-full">
        <!-- <div id="dashboard" on:change={handleFileUpload}></div> -->
        <input type="file" on:change={handleFileUpload}/>
    </div>
</main>

<script lang="ts">
    import Dashboard from '@uppy/dashboard';
    import Uppy from '@uppy/core';
    import '@uppy/core/dist/style.css';
    import '@uppy/dashboard/dist/style.css';
    import { onMount } from 'svelte';

    const handleFileUpload = async (e: Event) => {
        const target = e.target as HTMLInputElement;
        const file = target.files?.[0];

        if (file) {
            const getPresignedUrlResponse = await fetch('/api/upload', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    fileName: file.name,
                    fileType: file.type
                })
            });

            if (!getPresignedUrlResponse.ok) {
                console.error('Failed to get presigned URL');
            }

            const { presignedUrl, objectKey } = await getPresignedUrlResponse.json();
            const uploadToR2Response = await fetch(presignedUrl, {
                method: 'PUT',
                headers: {
                    'Content-Type': file.type
                },
                body: file
            });
            if (!uploadToR2Response.ok) {
                console.error('Failed to upload file to R2');
            }
        }
    };

    
</script>

<main class="mx-auto">
    <div class="container h-screen w-full">
        <!-- <div id="dashboard" on:change={handleFileUpload}></div> -->
        <input type="file" on:change={handleFileUpload}/>
    </div>
</main>

<script lang="ts">
    import Dashboard from '@uppy/dashboard';
    import Uppy from '@uppy/core';
    import '@uppy/core/dist/style.css';
    import '@uppy/dashboard/dist/style.css';
    import { onMount } from 'svelte';

    const handleFileUpload = async (e: Event) => {
        const target = e.target as HTMLInputElement;
        const file = target.files?.[0];

        if (file) {
            const getPresignedUrlResponse = await fetch('/api/upload', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    fileName: file.name,
                    fileType: file.type
                })
            });

            if (!getPresignedUrlResponse.ok) {
                console.error('Failed to get presigned URL');
            }

            const { presignedUrl, objectKey } = await getPresignedUrlResponse.json();
            const uploadToR2Response = await fetch(presignedUrl, {
                method: 'PUT',
                headers: {
                    'Content-Type': file.type
                },
                body: file
            });
            if (!uploadToR2Response.ok) {
                console.error('Failed to upload file to R2');
            }
        }
    };

    
</script>

<main class="mx-auto">
    <div class="container h-screen w-full">
        <!-- <div id="dashboard" on:change={handleFileUpload}></div> -->
        <input type="file" on:change={handleFileUpload}/>
    </div>
</main>

A

alka_99•2/17/24, 7:12 AM

here is my +server.ts:

import { PUBLIC_S3_BUCKET_NAME } from '$env/static/public';
import { S3 } from '$lib/s3';
import { PutObjectCommand } from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
import { json } from "@sveltejs/kit";

const slugifyString = (str: string) => {
    return str.trim().toLowerCase().replace(/\s+/g, '-').replace(/\./g, '-').replace(/-+/g, '-').replace(/[^a-z0-9-]/g, '-');
}

export const POST = async ({ request }) => {
    const { fileName, fileType, } = await request.json() as { fileName: string | undefined, fileType: string | undefined };

    if (!fileName || !fileType || fileName.trim() === '' || fileType.trim() === '') {
        return json({ message: 'Missing required parameters.' }, { status: 400 });
    }

    const objectKey = `${slugifyString(Date.now().toString())}-${slugifyString(fileName)}`;

    const presignedUrl = await getSignedUrl(S3, new PutObjectCommand({
        Bucket: PUBLIC_S3_BUCKET_NAME,
        Key: objectKey,
        ContentType: fileType,
        ACL: 'public-read'
    }), {
        expiresIn: 60 * 5 // 5 minutes
    });

    return json({ presignedUrl, objectKey });
};

import { PUBLIC_S3_BUCKET_NAME } from '$env/static/public';
import { S3 } from '$lib/s3';
import { PutObjectCommand } from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
import { json } from "@sveltejs/kit";

const slugifyString = (str: string) => {
    return str.trim().toLowerCase().replace(/\s+/g, '-').replace(/\./g, '-').replace(/-+/g, '-').replace(/[^a-z0-9-]/g, '-');
}

export const POST = async ({ request }) => {
    const { fileName, fileType, } = await request.json() as { fileName: string | undefined, fileType: string | undefined };

    if (!fileName || !fileType || fileName.trim() === '' || fileType.trim() === '') {
        return json({ message: 'Missing required parameters.' }, { status: 400 });
    }

    const objectKey = `${slugifyString(Date.now().toString())}-${slugifyString(fileName)}`;

    const presignedUrl = await getSignedUrl(S3, new PutObjectCommand({
        Bucket: PUBLIC_S3_BUCKET_NAME,
        Key: objectKey,
        ContentType: fileType,
        ACL: 'public-read'
    }), {
        expiresIn: 60 * 5 // 5 minutes
    });

    return json({ presignedUrl, objectKey });
};

import { PUBLIC_S3_BUCKET_NAME } from '$env/static/public';
import { S3 } from '$lib/s3';
import { PutObjectCommand } from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
import { json } from "@sveltejs/kit";

const slugifyString = (str: string) => {
    return str.trim().toLowerCase().replace(/\s+/g, '-').replace(/\./g, '-').replace(/-+/g, '-').replace(/[^a-z0-9-]/g, '-');
}

export const POST = async ({ request }) => {
    const { fileName, fileType, } = await request.json() as { fileName: string | undefined, fileType: string | undefined };

    if (!fileName || !fileType || fileName.trim() === '' || fileType.trim() === '') {
        return json({ message: 'Missing required parameters.' }, { status: 400 });
    }

    const objectKey = `${slugifyString(Date.now().toString())}-${slugifyString(fileName)}`;

    const presignedUrl = await getSignedUrl(S3, new PutObjectCommand({
        Bucket: PUBLIC_S3_BUCKET_NAME,
        Key: objectKey,
        ContentType: fileType,
        ACL: 'public-read'
    }), {
        expiresIn: 60 * 5 // 5 minutes
    });

    return json({ presignedUrl, objectKey });
};

import { PUBLIC_S3_BUCKET_NAME } from '$env/static/public';
import { S3 } from '$lib/s3';
import { PutObjectCommand } from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
import { json } from "@sveltejs/kit";

const slugifyString = (str: string) => {
    return str.trim().toLowerCase().replace(/\s+/g, '-').replace(/\./g, '-').replace(/-+/g, '-').replace(/[^a-z0-9-]/g, '-');
}

export const POST = async ({ request }) => {
    const { fileName, fileType, } = await request.json() as { fileName: string | undefined, fileType: string | undefined };

    if (!fileName || !fileType || fileName.trim() === '' || fileType.trim() === '') {
        return json({ message: 'Missing required parameters.' }, { status: 400 });
    }

    const objectKey = `${slugifyString(Date.now().toString())}-${slugifyString(fileName)}`;

    const presignedUrl = await getSignedUrl(S3, new PutObjectCommand({
        Bucket: PUBLIC_S3_BUCKET_NAME,
        Key: objectKey,
        ContentType: fileType,
        ACL: 'public-read'
    }), {
        expiresIn: 60 * 5 // 5 minutes
    });

    return json({ presignedUrl, objectKey });
};

here is my s3.ts:

import { R2_ACCESS_KEY, R2_ACCOUNT_ID, R2_SECRET_KEY } from "$env/static/private";
import { S3Client } from "@aws-sdk/client-s3";

const S3 = new S3Client({
    region: "auto",
    endpoint: `https://${R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,
    credentials: {
        accessKeyId: R2_ACCESS_KEY,
        secretAccessKey: R2_SECRET_KEY,
    },
});

export { S3 };

import { R2_ACCESS_KEY, R2_ACCOUNT_ID, R2_SECRET_KEY } from "$env/static/private";
import { S3Client } from "@aws-sdk/client-s3";

const S3 = new S3Client({
    region: "auto",
    endpoint: `https://${R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,
    credentials: {
        accessKeyId: R2_ACCESS_KEY,
        secretAccessKey: R2_SECRET_KEY,
    },
});

export { S3 };

import { R2_ACCESS_KEY, R2_ACCOUNT_ID, R2_SECRET_KEY } from "$env/static/private";
import { S3Client } from "@aws-sdk/client-s3";

const S3 = new S3Client({
    region: "auto",
    endpoint: `https://${R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,
    credentials: {
        accessKeyId: R2_ACCESS_KEY,
        secretAccessKey: R2_SECRET_KEY,
    },
});

export { S3 };

import { R2_ACCESS_KEY, R2_ACCOUNT_ID, R2_SECRET_KEY } from "$env/static/private";
import { S3Client } from "@aws-sdk/client-s3";

const S3 = new S3Client({
    region: "auto",
    endpoint: `https://${R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,
    credentials: {
        accessKeyId: R2_ACCESS_KEY,
        secretAccessKey: R2_SECRET_KEY,
    },
});

export { S3 };

A

alka_99•2/17/24, 7:19 AM

my cors policy:

[
  {
    "AllowedOrigins": [
      "http://localhost:5173"
    ],
    "AllowedMethods": [
      "GET",
      "PUT",
      "POST"
    ]
  }
]

[
  {
    "AllowedOrigins": [
      "http://localhost:5173"
    ],
    "AllowedMethods": [
      "GET",
      "PUT",
      "POST"
    ]
  }
]

[
  {
    "AllowedOrigins": [
      "http://localhost:5173"
    ],
    "AllowedMethods": [
      "GET",
      "PUT",
      "POST"
    ]
  }
]

[
  {
    "AllowedOrigins": [
      "http://localhost:5173"
    ],
    "AllowedMethods": [
      "GET",
      "PUT",
      "POST"
    ]
  }
]

D

delta•2/17/24, 7:28 AM

Anyone else having custom domain status unknown issues?

A

ammarriq•2/17/24, 7:56 AM

is it possible to get the local r2 bucket url without using the

bucket.get()

bucket.get()

bucket.get()

bucket.get() (it returns the object)?

S

stukennedy•2/17/24, 9:39 AM

does anyone know if there's a way to setup triggers in R2 to trigger a Worker when something changes in an R2 bucket?

O

oof2win2•2/17/24, 10:25 AM

are there any advantages of using r2 over images when i only intend to store image data?

O

oof2win2•2/17/24, 10:28 AM

oh okay, didnt notice

O

oof2win2•2/17/24, 10:28 AM

is there an API of usage from workers? i want to create signed upload urls for users

O

oof2win2•2/17/24, 10:29 AM

okay thats insanely cheaper number two it is

O

oof2win2•2/17/24, 10:30 AM

i mean i want compression of images but only on saving

O

oof2win2•2/17/24, 10:30 AM

like just apply a jpeg 80 compression to the image but i think i can do that within a worker no?

O

oof2win2•2/17/24, 10:31 AM

oh yeah

O

oof2win2•2/17/24, 10:32 AM

i mean i intend to store them for a max of 7 months so it shouldnt be too bad. worst case i can check it out later

O

oof2win2•2/17/24, 10:33 AM

i don't need on delivery i just don't want users storing up to 25 images of really high quality for each record

O

oof2win2•2/17/24, 10:33 AM

but i guess i can just limit the upload filesize

O

oof2win2•2/17/24, 10:34 AM

but how do i interact with r2? im checking over the whole r2 api through workers and its pretty bleak

O

oof2win2•2/17/24, 10:35 AM

yeah but i want to have presigned urls

O

oof2win2•2/17/24, 10:35 AM

thats with s3 compat but is it encouraged/supported?

O

oof2win2•2/17/24, 10:36 AM

yeah basically so the user uploads the images directly and i dont need to process them in my worker

O

oof2win2•2/17/24, 10:36 AM

so i shouldn't be worried about using the s3 compat layer

O

oof2win2•2/17/24, 10:37 AM

okay, thanks

Aalka_99 Hi guys new here in cloudflare stuff i try to build webpage that i want to uplo...

A

alka_99•2/17/24, 11:49 AM

bump

F

Felix•2/17/24, 1:01 PM

Hi, has anyone ever faced issues with slow R2 server response times?

When I open a image using the browser devtools I get a "Waiting for server reponse" of 150ms, which is quite slow. Images on my Vercel site are only waiting 35ms.

Some side notes:

I have a custom domain added (which should enable caching?)
I use a custom WAF rule to only accept request that contain a verification key

F

Felix•2/17/24, 1:03 PM

F

Felix•2/17/24, 1:07 PM

Hahah small typo

The cf-cache-status header returns HIT. So it should be cached, right?

F

Felix•2/17/24, 1:11 PM

Do you think that the WAF rule could slow down the server reponse time in any way?
I've read that its just a firewall rule, so no cloudflare workers of that sort should need to start.

Aalka_99 Hi guys new here in cloudflare stuff i try to build webpage that i want to uplo...

A

alka_99•2/17/24, 2:53 PM

bump

A

alka_99•2/17/24, 2:53 PM