Server Uploads with Vercel Blob

Server Uploads with Vercel Blob

Vercel Blob is available on all plans. Those with the owner, member, developer role can access this feature.

In this guide, you'll learn how to do the following:

Vercel has a 4.5 MB request body size limit on Vercel Functions. If you need to upload larger files, use client uploads.

Prerequisites

Vercel Blob works with any frontend framework. First, install the package:

Installation Commands

TypeScript

pnpm i @vercel/blob

Python

yarn add @vercel/blob

JavaScript

npm i @vercel/blob

Bun

bun add @vercel/blob

Create a Blob store

  1. Go to your project's Storage section in the sidebar
  2. Select Create Storage, then choose Blob
  3. Select Continue, then set the access to Private or Public
  4. Use the name "Images" and select Create a new Blob store
  5. Select the environments where you would like the read-write token to be included.

Once created, you are taken to the Vercel Blob store page.

Prepare your local project

Since you created the Blob store in a project, we automatically created and added the following Environment Variables to the project for you:

To use these Environment Variables locally, we recommend pulling them with the Vercel CLI:

vercel env pull

Upload a file using Server Actions

The following example shows how to use a Server Action with Next.js App Router to upload a file to Vercel Blob.

Example Code (Form Component)

import { put } from '@vercel/blob';
import { revalidatePath } from 'next/cache';

export async function Form() {
  async function uploadImage(formData: FormData) {
    'use server';
    const imageFile = formData.get('image') as File;
    const blob = await put(imageFile.name, imageFile, {
      access: 'private' /* or 'public' */,
      addRandomSuffix: true,
    });
    revalidatePath('/');
    return blob;
  }

return (
    <form action={uploadImage}>
      <label htmlFor="image">Image</label>
      <input
        type="file"
        id="image"
        name="image"
        accept="image/jpeg, image/png, image/webp"
        required
      />
      <button>Upload</button>
    </form>
  );
}

Upload a file using a server upload page and route

You can upload files to Vercel Blob using Route Handlers/API Routes. The following example shows how to upload a file to Vercel Blob using a server upload page and route.

Create a server upload page

'use client';
import type { PutBlobResult } from '@vercel/blob';
import { useState, useRef } from 'react';

export default function AvatarUploadPage() {
     const inputFileRef = useRef<HTMLInputElement>(null);
     const [blob, setBlob] = useState<PutBlobResult | null>(null);
     return (
       <>
         <h1>Upload Your Avatar</h1>

<form
           onSubmit={async (event) => {
             event.preventDefault();

if (!inputFileRef.current?.files) {
               throw new Error('No file selected');
             }

const file = inputFileRef.current.files[0];

const response = await fetch(
               `/api/avatar/upload?filename=${file.name}`,
               {
                 method: 'POST',
                 body: file,
               },
             );

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

setBlob(newBlob);
           }}
         >
           <input
             name="file"
             ref={inputFileRef}
             type="file"
             accept="image/jpeg, image/png, image/webp"
             required
           />
           <button type="submit">Upload</button>
         </form>
         {blob && (
           <div>
             Blob url: <a href={blob.url}>{blob.url}</a>
           </div>
         )}
       </>
     );
}

Create a server upload route

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');

const blob = await put(filename, request.body, {
       access: 'private' /* or 'public' */,
       addRandomSuffix: true,
     });

return NextResponse.json(blob);
}

Testing your page

  1. Run your application locally and visit /avatar/upload to upload the file to your store. The browser will display the unique URL created for the file.
  2. Review the Blob object metadata:
    • Go to the Vercel Project where you created the store
    • Open Storage in the sidebar and select your new store
    • Paste the blob object URL returned in the previous step in the Blob URL input box in the Browser section and select Lookup
    • The following blob object metadata will be displayed: file name, path, size, uploaded date, content type and HTTP headers

Next steps