Hi guys new here in cloudflare stuff i try to build webpage that i want to upload my image or any o

A

alka_99OP•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_99OP•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_99OP•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_99OP•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_99OP•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_99OP•2/17/24, 2:53 PM

bump

A

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

�

𝖆𝖚𝖙𝖎𝖘𝖙•2/17/24, 2:59 PM

Add cors rules to the bucket @alka_99

A

alka_99OP•2/17/24, 3:00 PM

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

i already add this

A

alka_99OP•2/17/24, 3:00 PM

@��

�

𝖆𝖚𝖙𝖎𝖘𝖙•2/17/24, 3:02 PM

Try it like this

A

alka_99OP•2/17/24, 3:03 PM

if it still for dev mode i just add http://localhost:5173 right?

�

𝖆𝖚𝖙𝖎𝖘𝖙•2/17/24, 3:04 PM

Yes, but you might need to add local cert aswell

�

𝖆𝖚𝖙𝖎𝖘𝖙•2/17/24, 3:04 PM

https://stackoverflow.com/a/76525335

Stack Overflow

run sveltekit dev with https

Is it possible, in development env, to run SvelteKit app with https?
I tried to run
npm run dev -- --https

and vite starts the server successfully:
VITE v3.0.2 ready in 359 ms

➜ Local: ht...

A

alka_99OP•2/17/24, 3:05 PM

interesting now the preflight returning response 200

A

alka_99OP•2/17/24, 3:05 PM

but the fetch one is not

�

𝖆𝖚𝖙𝖎𝖘𝖙•2/17/24, 3:06 PM

Are the access tokens valid?

A

alka_99OP•2/17/24, 3:07 PM

yes

A

alka_99OP•2/17/24, 3:07 PM

let me reset it again

A

alka_99OP•2/17/24, 3:09 PM

i just reset it again but had same issues

A

alka_99OP•2/17/24, 3:12 PM

but wasn't OPTIONS method is not available in the cors?

D

delta•2/17/24, 3:16 PM

D

delta•2/17/24, 3:16 PM

hmmmmmm

Aalka_99 interesting now the preflight returning response 200

�

𝖆𝖚𝖙𝖎𝖘𝖙•2/17/24, 3:20 PM

Can u tap on the 401ed request? And show what the response tab shows. Maybe more detail there?

�

𝖆𝖚𝖙𝖎𝖘𝖙•2/17/24, 3:20 PM

And try copying it as curl and execute it, sometimes gives more info

A

alka_99OP•2/17/24, 3:20 PM

i try to use my older bucket

A

alka_99OP•2/17/24, 3:20 PM

it works now using older one

Hi guys new here in cloudflare stuff i try to build webpage that i want to upload my image or any o

Similar Threads

Similar Threads

Similar Threads