Skip to content
Last updated on June 7, 2023
5 min read

Getting started with Vercel Blob

You can start uploading and reading files from your Vercel Blob store with this quickstart guide.

Note: Vercel Blob is currently in private beta. Sign up for the waitlist now

Sign up

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

  • Create a Blob store that is connected to one of your projects
  • Use the Vercel dashboard to create your store
  • Upload a file using the Blob SDK in an Edge Function
  • Get the file URL when the Edge Function is executed

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

pnpm i @vercel/blob

Navigate to the Project you'd like to add the blob store to. Select the Storage tab, then select the Connect Database button.

Under the Create New tab, select Blob and then the Continue button.

Use the name "Images" and select Create a new Blob store. Select the environments where you would like the read-write token to be included. You can also update the prefix of the Environment Variable in Advanced Options

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

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

  • BLOB_READ_WRITE_TOKEN

To use this Environment Variable locally, we recommend pulling it with the Vercel CLI:

vercel env pull .env.development.local

To add a file to the Blob store, create an Edge Function and paste the following code:

pages/api/blob.ts
import { put } from '@vercel/blob';
import { NextRequest, NextResponse } from 'next/server';
 
export const config = { runtime: 'edge' };
 
export default async function upload(request: NextRequest) {
  const { url } = await put('file.txt', request.body, { access: 'public' });
 
  return NextResponse.json({ url });
}

Run your application locally and visit /api/blob to upload the file to your store. The browser will return the unique URL created for the file based on the base path your provided.

  • Go to the Vercel Project where you created the store
  • Select the Storage tab 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
  • You also have the option to download and delete the file from this page

You have successfully uploaded an object to your Vercel Blob store and are able to review it's metadata, download, and delete it from your Vercel Storage Dashboard.