SDK 레퍼런스

npm install @vercel/blob

vercel env pull .env.development.local

import { put } from '@vercel/blob';
 
export const runtime = 'edge';
 
export async function PUT(request: Request) {
  const form = await request.formData();
  const file = form.get('file') as File;
  const blob = await put(file.name, file, { access: 'public' });
 
  return Response.json(blob);
}

{
  "pathname": "문자열",
  "contentType": "문자열",
  "contentDisposition": "문자열",
  "url": "문자열",
  "downloadUrl": "문자열"
}

{
  "pathname": "profilesv1/user-12345.txt",
  "contentType": "text/plain",
  "contentDisposition": "attachment; filename=\"user-12345.txt\"",
  "url": "https://ce0rcu23vrrdzqap.public.blob.vercel-storage.com/\
      profilesv1/user-12345-NoOVGDVcqSPc7VYCUAGnTzLTG2qEM2.txt",
  "downloadUrl": "https://ce0rcu23vrrdzqap.public.blob.vercel-storage.com/\
      profilesv1/user-12345-NoOVGDVcqSPc7VYCUAGnTzLTG2qEM2.txt?download=1"
}

{
  "pathname": "profilesv1/user-12345.txt",
  "contentType": "text/plain",
  "contentDisposition": "attachment; filename=\"user-12345.txt\"",
  "url": "https://ce0rcu23vrrdzqap.public.blob.vercel-storage.com/\
      profilesv1/user-12345.txt",
  "downloadUrl": "https://ce0rcu23vrrdzqap.public.blob.vercel-storage.com/\
      profilesv1/user-12345.txt?download=1"
}

const blob = await put('large-movie.mp4', file, {
  access: 'public',
  multipart: true,
});

const multipartUpload = await createMultipartUpload(pathname, options);

{
  "key": "문자열",
  "uploadId": "문자열"
}

const part = await uploadPart(pathname, chunkBody, options);

{
  "etag": "문자열",
  "partNumber": "문자열"
}

const blob = await completeMultipartUpload(pathname, parts, options);

{
  "pathname": "문자열",
  "contentType": "문자열",
  "contentDisposition": "문자열",
  "url": "문자열",
  "downloadUrl": "문자열"
}

const uploader = await createMultipartUploader(pathname, options);

{
  "key": "문자열",
  "uploadId": "문자열",
  "uploadPart": "함수",
  "complete": "함수"
}

const part = await uploader.uploadPart(partNumber, chunkBody);

{
  "etag": "문자열",
  "partNumber": "문자열"
}

const blob = await uploader.complete(partNumber, chunkBody);

{
  "pathname": "문자열",
  "contentType": "문자열",
  "contentDisposition": "문자열",
  "url": "문자열",
  "downloadUrl": "문자열"
}

import { del } from '@vercel/blob';
 
export const runtime = 'edge';
 
export async function DELETE(request: Request) {
  const { searchParams } = new URL(request.url);
  const urlToDelete = searchParams.get('url') as string;
  await del(urlToDelete);
 
  return new Response();
}

del(url, options);

import { head } from '@vercel/blob';
 
export const runtime = 'edge';
 
export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const blobUrl = searchParams.get('url');
  const blobDetails = await head(blobUrl);
 
  return Response.json(blobDetails);
}

head(url, options);

{
  "size": "숫자",
  "uploadedAt": "날짜",
  "pathname": "문자열",
  "contentType": "문자열",
  "contentDisposition": "문자열",
  "url": "문자열",
  "downloadUrl": "문자열",
  "cacheControl": "문자열"
}

import { list } from '@vercel/blob';
 
export const runtime = 'edge';
 
export async function GET(request: Request) {
  const { blobs } = await list();
  return Response.json(blobs);
}

list(options);

{
  "blobs": [
    {
      "size": "숫자",
      "uploadedAt": "날짜",
      "pathname": "문자열",
      "url": "문자열",
      "downloadUrl": "문자열"
    }
  ],
  "cursor": "문자열",
  "hasMore": "불리언",
  "folders": ["문자열"]
}

let hasMore = true;
let cursor;
 
while (hasMore) {
  const listResult = await list({
    cursor,
  });
  hasMore = listResult.hasMore;
  cursor = listResult.cursor;
}

const {
  folders: [firstFolder],
  blobs: rootBlobs,
} = await list({ mode: 'folded' });
 
const { folders, blobs } = 
    await list({ mode: 'folded', prefix: firstFolder });

import { copy } from '@vercel/blob';
 
export const runtime = 'edge';
 
export async function PUT(request: Request) {
  const form = await request.formData();
 
  const fromUrl = form.get('fromUrl') as string;
  const toPathname = form.get('toPathname') as string;
 
  const blob = await copy(fromUrl, toPathname, { access: 'public' });
 
  return Response.json(blob);
}

{
  "pathname": "문자열",
  "contentType": "문자열",
  "contentDisposition": "문자열",
  "url": "문자열",
  "downloadUrl": "문자열"
}

{
  "pathname": "profilesv1/user-12345-copy.txt",
  "contentType": "text/plain",
  "contentDisposition": "attachment; \
      filename=\"user-12345-copy.txt\"",
  "url": "https://ce0rcu23vrrdzqap.public.\
      blob.vercel-storage.com/profilesv1/user-12345-copy.txt",
  "downloadUrl": "https://ce0rcu23vrrdzqap.public.\
      blob.vercel-storage.com/profilesv1/user-12345-copy.txt?download=1"
}

{
  "pathname": "문자열",
  "contentType": "문자열",
  "contentDisposition": "문자열",
  "url": "문자열",
  "downloadUrl": "문자열"
}

handleUpload(options);

Promise<
  | { type: 'blob.generate-client-token'; clientToken: string }
  | { type: 'blob.upload-completed'; response: 'ok' }
>

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, clientPayload) => {
        // 브라우저가 파일을 업로드할 수 있는 클라이언트 토큰 생성
        // ⚠️ 토큰 생성 전 사용자 인증 및 권한 부여
        // 그렇지 않으면 익명 업로드를 허용하게 됩니다.
 
        // ⚠️ clientPayload 기능 사용 시, 앱의 보안 문제를 초래할 수 있으므로
        // 검증이 필요합니다. 예를 들어 사용자가 다른 사용자의 게시물을 수정할 수 있습니다.
 
        return {
          // 선택 사항, 기본값은 모든 콘텐츠 유형
          allowedContentTypes: ['image/jpeg', 'image/png', 'image/gif'], 
          tokenPayload: JSON.stringify({
            // 선택 사항, 업로드 완료 시 서버로 전송됨
            // 인증에서 사용자 ID 또는 clientPayload에서 값을 전달할 수 있음
          }),
        };
      },
      onUploadCompleted: async ({ blob, tokenPayload }) => {
        // 클라이언트 업로드 완료 알림
        // ⚠️ `localhost` 웹사이트에서는 작동하지 않음
        // ngrok 또는 유사 서비스를 사용하여 전체 업로드 흐름을 경험하세요
 
        console.log('blob 업로드 완료', blob, tokenPayload);
 
        try {
          // 파일 업로드 완료 후 로직 실행
        } catch (error) {
          throw new Error('게시물을 업데이트할 수 없음');
        }
      },
    });
 
    return NextResponse.json(jsonResponse);
  } catch (error) {
    return NextResponse.json(
      { error: (error as Error).message },
      { status: 400 }, // 웹훅은 200을 받을 때까지 5번 재시도
    );
  }
}

import { put, BlobAccessError } from '@vercel/blob';
 
try {
  await put(...);
} catch (error) {
  if (error instanceof BlobAccessError) {
    // 인식된 에러 처리
  } else {
    // 알 수 없는 에러인 경우 다시 throw
    throw error;
  }
}