https://dash.cloudflare.com/your-user-id/home

R2_ACCOUNT_ID=your_user_id
R2_ACCESS_KEY_ID=your_access_key
R2_SECRET_ACCESS_KEY=your_secret_key
R2_BUCKET=your_bucket_name
R2_REGION=auto
R2_ENDPOINT=your_r2_endpoint

[
  {
    "AllowedOrigins": ["http://localhost:3000"],
    "AllowedMethods": ["GET", "PUT", "DELETE"],
    "AllowedHeaders": ["*"],
    "ExposeHeaders": ["ETag"],
    "MaxAgeSeconds": 3600
  }
]

npm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner

import { S3Client } from "@aws-sdk/client-s3";
 
export const r2 = new S3Client({
  region: process.env.R2_REGION,
  endpoint: process.env.R2_ENDPOINT,
  credentials: {
    accessKeyId: process.env.R2_ACCESS_KEY_ID!,
    secretAccessKey: process.env.R2_SECRET_ACCESS_KEY!,
  },
});

import { r2 } from "@/lib/r2";
import { PutObjectCommand } from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import { NextResponse } from "next/server";
 
export async function POST(req: Request) {
  const { fileType, fileName } = await req.json();
 
  const url = await getSignedUrl(
    r2,
    new PutObjectCommand({
      Bucket: process.env.R2_BUCKET!,
      Key: fileName,
      ContentType: fileType,
    }),
    { expiresIn: 60 }
  );
 
  const publickUrl = `${process.env.R2_DEV_URL}/${fileName}`;
 
  return NextResponse.json({ url, publickUrl });
}

'use client'
import { useState } from "react";
 
export default function Home() {
  const [status, setStatus] = useState("");
  const [file, setFile] = useState<File | null>(null);
 
  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFile(e.target.files?.[0] || null);
    setStatus("");
  };
 
  const uploadImage = async () => {
    if (!file) return;
 
    setStatus("Requesting upload URL...");
    const fileName = `test-image-${Date.now()}-${file.name}`;
    const fileType = file.type;
 
    const res = await fetch("/api/upload-url", {
      method: "POST",
      body: JSON.stringify({ fileName, fileType }),
      headers: { "Content-Type": "application/json" },
    });
 
    const { url } = await res.json();
 
    setStatus("Uploading...");
    const uploadRes = await fetch(url, {
      method: "PUT",
      headers: { "Content-Type": fileType },
      body: file,
    });
 
    setStatus(uploadRes.ok ? `Uploaded: ${fileName}` : "Upload failed");
  };
 
  return (
    <div className="p-4">
      <h1 className="text-lg font-semibold">Upload Image to R2</h1>
      <input
        type="file"
        accept="image/*"
        onChange={handleFileChange}
        className="bg-sky-700 text-white p-2 px-4 mr-2 rounded-xl"
      />
      <button
        disabled={!file}
        onClick={uploadImage}
        className="px-4 py-2 bg-orange-500 text-white rounded disabled:opacity-50"
      >
        Upload Image
      </button>
      <p>{status}</p>
    </div>
  );
}