KK
KK
NN
domain.com/r2/ route? @Community Champion
DNN
GGGG<API board URL>/policy
J
A
A
AAA
D
Abucket.get() (it returns the object)?
S
OOOOOOOOOOOOOOOO
A
FF
F
FA
�AA
domain.com/r2/<API board URL>/policyAccess 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.bucket.get()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 { 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 };[
{
"AllowedOrigins": [
"http://localhost:5173"
],
"AllowedMethods": [
"GET",
"PUT",
"POST"
]
}
]<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>