hey guys i’m really struggling with
hey guys i’m really struggling with setting up r2 for my nextjs project and the documentation isn’t helping pls guide me
10 Replies
Hey, can you please elaborate what are you trying to do? How are you trying to access your bucket? Is your next.js app hosted on Workers? Without much details, it is really difficult to understand your struggles and provide any help.
Here's also a repo that might help: https://github.com/harshil1712/nextjs-r2-demo
GitHub
GitHub - harshil1712/nextjs-r2-demo: Upload images to Cloudflare R2...
Upload images to Cloudflare R2 via the Workers API, Pre-signed URL, or Temporary Credentials - harshil1712/nextjs-r2-demo
hi harshil, i’m currently in production and i’ve not yet deployed the app. i’m making an image sharing project, i need to upload and fetch images/posts from users
i’m using s3 to make these calls from my nextjs project
here is the upload handler route import { NextRequest, NextResponse } from "next/server";
import { PutObjectCommand, S3Client } from "@aws-sdk/client-s3";
const accessKeyId = process.env.R2_ACCESS_KEY "";
const secretAccessKey = process.env.R2_SECRET_KEY "";
const endpoint = process.env.CLOUDFLARE_ENDPOINT "";
const BUCKET = process.env.R2_BUCKET_NAME!;
if (!accessKeyId !secretAccessKey || !endpoint) {
throw new Error("Missing required Cloudflare R2 credentials or endpoint.");
}
const r2 = new S3Client({
region: "auto",
endpoint: endpoint,
credentials: {
accessKeyId,
secretAccessKey,
},
});
export const POST = async (req: NextRequest) => {
try {
// Get the form data from the request
const formData = await req.formData();
const file = formData.get("file") as File; // Get the file from the form
// Convert the file to a buffer
const bytes = await file.arrayBuffer();
const buffer = Buffer.from(bytes);
// Create the PutObjectCommand to upload to R2
const putObjectCommand = new PutObjectCommand({
Bucket: BUCKET, // Your Cloudflare R2 bucket name
Key: file.name, // File name in the R2 bucket
Body: buffer, // File content
});
// Send the command to upload the file to R2
const response = await r2.send(putObjectCommand);
console.log("Upload Response:", response);
// Return success response
return NextResponse.json({ success: true }, { status: 200 });
} catch (error) {
// Log and return error response
console.error("Upload Error:", error);
return NextResponse.json({ success: false, message: error.message }, { status: 500 });
}
};
i’m currently stuck on the get request to fetch image url
i’m sending a get request with the file name in my r2 bucket but it’s giving me 405 forbidden method not allowed
@Space can you help with this?
i was looking for r2 tutorials all that time
i’ve one question
i’m creating a project that allows users to share images so i’ve figured out the uploading part but for fetching those images from r2 bucket do i need to use a presigned url and how does it work like would i be able to render those images on my website
how can i use custom domains? can you suggest some tutorial or doc?
@Space
Hey, we have the documentation for that. Did you check that?
i’ve read the docs but they’re very jarring
i don’t seem to understand how to keep the bucket secure and at the same time let my users see the images on their feed
is there some guide for beginners that hand olds us throughout the process
There are different ways to do achieve this. We don't share in the docs, because we want the users to have the freedom to think how they want to do this. You can use the Workers API with auth, or setup pre-signed URLs, but again with proper auth.
can you help me understand the flow of this using s3? i want my user to be able to upload images and see them as their posts on the feed
Is this pre-signed URL or directly the S3 API?
s3 api
i don’t understand how my users would be able to use the pre signed url to see the posts they’ll have to generate a new url every time to see the posts?
ah true. I thought this was for uploading. If it's for viewing, as mentioned you can check the auth, and if valid use the S3 API to fetch the image.
i should make my bucket public for that right?