Kinh nghiệm làm việc với FullStack NextJS - Kỳ 4: Upload file lên Cloudfare R2

import { S3Client } from "@aws-sdk/client-s3";
import memoizeOne from "memoize-one";

export const Bucket = {
	dev: process.env.R2_BUCKET_DEV,
	prod: process.env.R2_BUCKET_PROD,
	public: process.env.R2_BUCKET_PUBLIC,
};

const getClient = memoizeOne(() => {
	const endpoint = `https://${process.env.R2_ACCOUNT_ID}.r2.cloudflarestorage.com`;

	return new S3Client({
		region: "auto",
		credentials: {
			accessKeyId: process.env.S3_COMPATIBLE_ACCESS_ID as string,
			secretAccessKey: process.env.S3_COMPATIBLE_SECRET_KEY as string,
		},
		endpoint,
		forcePathStyle: true,
		apiVersion: "v4",
	});
});

export const s3Client = getClient();

import { PutObjectCommand } from '@aws-sdk/client-s3'
import { getSignedUrl } from '@aws-sdk/s3-request-presigner'
import { NextResponse } from 'next/server'
import { v4 as uuidv4 } from 'uuid'

import { Bucket, s3Client } from '@/lib/storage/s3'

export async function POST(request: Request) {
  const formData = await request.formData();
  const image = formData.get("file") as File;
  const buffer = Buffer.from(await image.arrayBuffer());
  const DayInMonthInYear = new Date().getFullYear() + "/" + (new Date().getMonth() + 1) + "/" + new Date().getDate();
  const relativeUploadDir = `uploads/${DayInMonthInYear}`;

  try {
    const data = {
      Bucket: Bucket.dev,
      Key: `${relativeUploadDir}/${uuidv4()}.${image.type.split('/')[1]}`,
    };
    const signedUrl = await getSignedUrl(
      s3Client,
      new PutObjectCommand(data),
      { expiresIn: 3600 }
    )
    await fetch(signedUrl, {
      method: 'PUT',
      headers: {
        "Content-Type": image.type,
        "Content-Length": image.size.toString(),
      },
      body: buffer
    })
    const response = Bucket.public + '/' + data.Key
    return NextResponse.json({ success: 'success', link: response })
  } catch (err) {
    console.log('error')
  }
}

import { mkdir, stat, writeFile } from "fs/promises";
import mime from "mime";
import { join } from "path";

export async function POST(request: Request) {
  const formData = await request.formData();
  const image = formData.get("image") as File;
  const buffer = Buffer.from(await image.arrayBuffer());
  const DayInMonthInYear = new Date().getFullYear() + "/" + (new Date().getMonth() + 1) + "/" + new Date().getDate();
  const relativeUploadDir = `/uploads/${DayInMonthInYear}`;
  const uploadDir = join(process.cwd(), "public", relativeUploadDir);

  // accept only image files
  if (!image.type.startsWith("image")) {
    return new Response(
      JSON.stringify({ message: "Invalid file type", success: "error" }),
      {
        status: 200,
        headers: {
          "content-type": "application/json",
        },
      },
    );
  }
  try {
    const uniqueSuffix = `${Date.now()}-${Math.round(Math.random() * 1e9)}`;
    const filename = `${uniqueSuffix}.${mime.getExtension(image.type)}`;
    await writeFile(`${uploadDir}/${filename}`, buffer);
    const fileUrl = `${relativeUploadDir}/${filename}`;

    return new Response(
      JSON.stringify({
        message: "File uploaded successfully",
        link: fileUrl,
        success: "success",
      }),
      {
        status: 200,
        headers: {
          "content-type": "application/json",
        },
      },
    );
  } catch (error) {
    console.error(error);
  }
}

export async function POST(request: Request) {
  process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0";
  const formData = await request.formData();
  const image = formData.get("image") as File;
  const body = new FormData();
  body.append("file", image);
  const ret = await fetch(`https://yourserver.com/upload.php`, {
    method: "POST",
    body: body,
  });

  const json = (await ret.json()).url;
  if (!json) {
    return new Response(
      JSON.stringify({ message: "File upload failed", success: "error" }),
      {
        status: 500,
        headers: {
          "content-type": "application/json",
        },
      },
    );
  }

  return new Response(
    JSON.stringify({
      message: "File uploaded successfully",
      link: json,
      success: "success",
    }),
    {
      status: 200,
      headers: {
        "content-type": "application/json",
      },
    },
  );
}