This skill provides comprehensive knowledge for integrating Vercel Blob object storage into Vercel applications. It should be used when setting up file uploads, managing images and documents, implementing CDN-delivered assets, or handling large files in Next.js serverless and edge functions. Use this skill when: - Setting up file uploads for Next.js applications (images, PDFs, videos) - Implementing client-side uploads with presigned URLs - Managing user-generated content (avatars, attachments, media) - Building file management features (list, download, delete) - Migrating from Cloudflare R2 to Vercel Blob - Encountering errors like "BLOB_READ_WRITE_TOKEN not set", "file size limit exceeded", or "client upload token errors" - Need simple object storage with automatic CDN distribution Keywords: vercel blob, @vercel/blob, vercel storage, vercel file upload, vercel cdn, blob storage vercel, client upload vercel, presigned url vercel, file upload nextjs, image upload vercel, pdf upload, video upload, user uploads, multipart upload, streaming upload, blob cdn, vercel assets, file download
Status: ✅ Production Ready
Last Updated: 2025-10-29
Package Version: @vercel/blob@2.0.0
@vercel/blob, vercel blob, vercel storage, vercel file uploadObject storage for Vercel applications with automatic CDN distribution. Perfect for user uploads, images, documents, and media files.
✅ Simple upload API (put/list/del) ✅ Client-side uploads (presigned URLs) ✅ Automatic CDN distribution ✅ 10 errors prevented (token security, file limits, etc.) ✅ ~60% token savings
# 1. Create Blob store in Vercel dashboard
vercel env pull .env.local
# 2. Install
npm install @vercel/blob
# 3. Upload (server)
import { put } from '@vercel/blob';
const blob = await put('file.jpg', file, { access: 'public' });
# 4. Client upload (secure)
import { handleUpload } from '@vercel/blob/client';
const token = await handleUpload({ ... });
Full details: SKILL.md
Ready-to-use React components for common file upload patterns:
templates/drag-drop-upload.tsx - Complete drag & drop upload with progress tracking, file preview, error handling, and batch upload supporttemplates/avatar-upload-flow.tsx - Full avatar upload flow with image preview, validation, delete old avatar, and server action varianttemplates/file-list-manager.tsx - Display uploaded files with view/download/delete actions, pagination, and file type iconstemplates/package.json - Dependencies and versions for Vercel Blob + Next.jsAll templates include:
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer