클라이언트 업로드 가이드

npm install @vercel/blob

vercel env pull .env.development.local

'use client';
 
import { type PutBlobResult } from '@vercel/blob';
import { upload } from '@vercel/blob/client';
import { useState, useRef } from 'react';
 
function AvatarUploadPage() {
  const inputFileRef = useRef<HTMLInputElement>(null);
  const [blob, setBlob] = useState<PutBlobResult | null>(null);
  return (
    <>
      <h1>아바타 업로드하기</h1>
 
      <form
        onSubmit={async (event) => {
          event.preventDefault();
 
          if (!inputFileRef.current?.files) {
            throw new Error('파일이 선택되지 않았습니다');
          }
 
          const file = inputFileRef.current.files[0];
 
          const newBlob = await upload(file.name, file, {
            access: 'public',
            handleUploadUrl: '/api/avatar/upload',
          });
 
          setBlob(newBlob);
        }}
      >
        <input name="file" ref={inputFileRef} type="file" required />
        <button type="submit">업로드</button>
      </form>
      {blob && (
        <div>
          Blob URL: <a href={blob.url}>{blob.url}</a>
        </div>
      )}
    </>
  );
}

export default AvatarUploadPage;

import { handleUpload, type HandleUploadBody } from '@vercel/blob/client';
import { NextResponse } from 'next/server';
 
export async function POST(request: Request): Promise<NextResponse> {
  const body = (await request.json()) as HandleUploadBody;
 
  try {
    const jsonResponse = await handleUpload({
      body,
      request,
      onBeforeGenerateToken: async (
        pathname,
        // 클라이언트 페이로드
      ) => {
        // 브라우저가 파일을 업로드할 수 있는 클라이언트 토큰 생성
        // ⚠️ 토큰을 생성하기 전에 사용자 인증 및 권한 부여
        // 그렇지 않으면 익명 업로드를 허용하게 됩니다.
 
        return {
          allowedContentTypes: ['image/jpeg', 'image/png', 'image/gif'],
          tokenPayload: JSON.stringify({
            // 선택적, 업로드 완료 시 서버로 전송됨
            // 인증에서 사용자 ID 또는 클라이언트 페이로드에서 값을 전달할 수 있음
          }),
        };
      },
      onUploadCompleted: async ({ blob, tokenPayload }) => {
        // 클라이언트 업로드 완료 알림
        // ⚠️ `localhost` 웹사이트에서는 작동하지 않음
        // ngrok 또는 비슷한 서비스를 사용해 전체 업로드 흐름을 경험하세요
 
        console.log('blob 업로드 완료', blob, tokenPayload);
 
        try {
          // 파일 업로드 완료 후 로직 실행
          // const { userId } = JSON.parse(tokenPayload);
          // await db.update({ avatar: blob.url, userId });
        } catch (error) {
          throw new Error('사용자를 업데이트할 수 없음');
        }
      },
    });
 
    return NextResponse.json(jsonResponse);
  } catch (error) {
    return NextResponse.json(
      { error: (error as Error).message },
      { status: 400 }, // 웹훅은 200을 받을 때까지 5번 재시도함
    );
  }
}