_action.ts

"use server";

import { auth } from "@/lib/auth";
import { type PutBlobResult } from "@vercel/blob";


export async function UploadImage(fd: FormData) {
  const session = await auth();
  const userId = session?.user.id;
  console.log("userId", userId);

  if (!userId) {
    return {
      errors: {
        auth: ["You must be logged in to submit a map"],
      },
      message: "You must be logged in to submit a map",
    };
  }

  const file = fd.get("file") as File;

  const response = await fetch(
    `http://localhost:5500/api/image/upload?filename=${file.name}`,
    {
      method: "POST",
      body: file,
    },
  );

  const newBlob = (await response.json()) as PutBlobResult;

  console.log("newBlob", newBlob);
}


api/image/upload/route.ts

import { put } from "@vercel/blob";
import { NextResponse } from "next/server";

export async function POST(request: Request): Promise<NextResponse> {
  const { searchParams } = new URL(request.url);
  const filename = searchParams.get("filename");

  if (!filename) {
    return NextResponse.json(
      { error: "filename is required" },
      { status: 400 },
    );
  }

  if (!request.body) {
    return NextResponse.json({ error: "body is required" }, { status: 400 });
  }

  const blob = await put(filename, request.body, {
    access: "public",
  });

  return NextResponse.json(blob);
}