Integration GuideCommunity
Memberstack
+
Vercel

Vercel Blob File Uploader

Enable browser-to-blob file uploads for your members. Complete guide for setting up Vercel Blob storage with serverless functions.

10-15 min

Setup Time

Free Tier

Included

Vercel Only

Single Platform

How It Works

Vercel Blob handles storage, serverless functions manage uploads/deletes.

Browser Upload

Serverless Function

Blob Storage

Phase 1

Vercel Setup

1

Create Vercel Account & Project

  1. Go to vercel.com and sign up
  2. Click Add New... > Project
  3. Name it blob-file-api
  4. Click Deploy
2

Get the API Project Files

Option A: Clone the repo (Fastest)

Terminal
git clone https://github.com/Magnaem-a/memberscript211.git

Jump straight to Step 3.

Option B: Create files manually

File 1: package.json

package.json
{
  "name": "blob-file-api",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "dependencies": {
    "@vercel/blob": "^0.27.0"
  }
}

File 2: vercel.json

vercel.json
{
  "framework": null,
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Origin", "value": "*" },
        { "key": "Access-Control-Allow-Methods", "value": "GET, PUT, POST, DELETE, OPTIONS" },
        { "key": "Access-Control-Allow-Headers", "value": "Content-Type" }
      ]
    }
  ]
}

File 3: api/upload.js

api/upload.js
const { put } = require('@vercel/blob');

module.exports = async function handler(req, res) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'PUT, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

  if (req.method === 'OPTIONS') return res.status(200).end();
  if (req.method !== 'PUT') return res.status(405).json({ error: 'Method not allowed' });

  var filename = req.query.filename;
  if (!filename) return res.status(400).json({ error: 'filename required' });

  try {
    var blob = await put(filename, req, {
      access: 'public',
      contentType: req.headers['content-type'] || 'application/octet-stream',
      addRandomSuffix: false
    });
    return res.status(200).json(blob);
  } catch (e) {
    return res.status(500).json({ error: e.message });
  }
};

module.exports.config = { api: { bodyParser: false } };

File 4: api/delete.js

api/delete.js
const { del } = require('@vercel/blob');

module.exports = async function handler(req, res) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'DELETE, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

  if (req.method === 'OPTIONS') return res.status(200).end();
  if (req.method !== 'DELETE') return res.status(405).json({ error: 'Method not allowed' });

  var url = req.query.url;
  if (!url) return res.status(400).json({ error: 'url required' });

  try {
    await del(url);
    return res.status(200).json({ deleted: true });
  } catch (e) {
    return res.status(500).json({ error: e.message });
  }
};

Phase 2

Blob Storage

3

Create a Blob Store

  1. In Vercel Dashboard, go to your project
  2. Click the Storage tab
  3. Click Connect Database
Vercel Storage tab
Click Connect Database in the Storage tab
  1. Select Blob under Create New
  2. Name your store (e.g., file-uploads)
  3. Select all environments and click Create

This auto-creates a BLOB_READ_WRITE_TOKEN environment variable.

Phase 3

Deploy

4

Deploy via Git or CLI

Option A: Git

  1. Push files to GitHub
  2. Connect repo in Vercel Settings
  3. Auto-deploys on push

Option B: CLI

  1. npm i -g vercel
  2. Run vercel --prod
5

Get Your API URL

Your API URL looks like:

https://blob-file-api.vercel.app

Phase 4

Memberstack Setup

6

Create Data Table

Create a table called uploads with these fields:

FieldType
memberText
file_nameText
file_urlText
file_typeText
file_sizeText
uploaded_atText
7

Configure Your Site

Add the container with data-ms-field="blob-manager"

IMPORTANT: API URL must include https://

Switching from AWS S3

  1. Change data-ms-field="s3-manager" to data-ms-field="blob-manager"
  2. Update data-ms-code-api to your Vercel URL
  3. Remove data-ms-code-bucket attribute

Vercel Blob vs AWS S3

FeatureVercel BlobAWS S3
Setup time~10 min~30 min
ServicesVercel onlyS3 + IAM + API Gateway
Free tier500MB5GB
Max file4.5MB (500MB w/ client)10MB

Troubleshooting

413 Payload Too Large: File exceeds 4.5MB limit
500 error: Check Blob store connection
CORS error: Verify vercel.json headers

Security Notes

• Files are publicly readable via URL

• Token is server-side only

• Replace * with your domain for tighter security

Try Memberstack for free

100% free, unlimited trial — upgrade only when you're ready to launch. No credit card required.