zhongwei/gh-jezweb-claude-skills-skills-vercel-blob
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zhongwei Li
2025-11-30 08:25:45 +08:00
commit eba53798b0
11 changed files with 1754 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
.claude-plugin/plugin.json Normal file
View File

@@ -0,0 +1,12 @@
{
"name": "vercel-blob",
"description": "Integrate Vercel Blob object storage for file uploads, image management, and CDN-delivered assets in Next.js applications. Supports client-side uploads with presigned URLs and multipart transfers. Use when implementing file uploads (images, PDFs, videos), managing user-generated content, or troubleshooting missing tokens, size limit errors, or client upload failures.",
"version": "1.0.0",
"author": {
"name": "Jeremy Dawes",
"email": "jeremy@jezweb.net"
},
"skills": [
"./"
]
}

3
README.md Normal file
View File

@@ -0,0 +1,3 @@
# vercel-blob
Integrate Vercel Blob object storage for file uploads, image management, and CDN-delivered assets in Next.js applications. Supports client-side uploads with presigned URLs and multipart transfers. Use when implementing file uploads (images, PDFs, videos), managing user-generated content, or troubleshooting missing tokens, size limit errors, or client upload failures.

596
SKILL.md Normal file
View File

@@ -0,0 +1,596 @@
---
name: vercel-blob
description: |
Integrate Vercel Blob object storage for file uploads, image management, and CDN-delivered assets in Next.js applications. Supports client-side uploads with presigned URLs and multipart transfers.
Use when implementing file uploads (images, PDFs, videos), managing user-generated content, or troubleshooting missing tokens, size limit errors, or client upload failures.
license: MIT
---
# Vercel Blob (Object Storage)
**Status**: Production Ready
**Last Updated**: 2025-10-29
**Dependencies**: None
**Latest Versions**: `@vercel/blob@2.0.0`
---
## Quick Start (3 Minutes)
### 1. Create Blob Store
```bash
# In Vercel dashboard: Storage → Create Database → Blob
vercel env pull .env.local
```
Creates: `BLOB_READ_WRITE_TOKEN`
### 2. Install
```bash
npm install @vercel/blob
```
### 3. Upload File (Server Action)
```typescript
'use server';
import { put } from '@vercel/blob';
export async function uploadFile(formData: FormData) {
const file = formData.get('file') as File;
const blob = await put(file.name, file, {
access: 'public' // or 'private'
});
return blob.url; // https://xyz.public.blob.vercel-storage.com/file.jpg
}
```
**CRITICAL:**
- Use client upload tokens for direct client uploads (don't expose `BLOB_READ_WRITE_TOKEN`)
- Set correct `access` level (`public` vs `private`)
- Files are automatically distributed via CDN
---
## The 5-Step Setup Process
### Step 1: Create Blob Store
**Vercel Dashboard**:
1. Project → Storage → Create Database → Blob
2. Copy `BLOB_READ_WRITE_TOKEN`
**Local Development**:
```bash
vercel env pull .env.local
```
Creates `.env.local`:
```bash
BLOB_READ_WRITE_TOKEN="vercel_blob_rw_xxx"
```
**Key Points:**
- Free tier: 100GB bandwidth/month
- File size limit: 500MB per file
- Automatic CDN distribution
- Public files are cached globally
---
### Step 2: Server-Side Upload
**Next.js Server Action:**
```typescript
'use server';
import { put } from '@vercel/blob';
export async function uploadAvatar(formData: FormData) {
const file = formData.get('avatar') as File;
// Validate file
if (!file.type.startsWith('image/')) {
throw new Error('Only images allowed');
}
if (file.size > 5 * 1024 * 1024) {
throw new Error('Max file size: 5MB');
}
// Upload
const blob = await put(`avatars/${Date.now()}-${file.name}`, file, {
access: 'public',
addRandomSuffix: false
});
return {
url: blob.url,
pathname: blob.pathname
};
}
```
**API Route (Edge Runtime):**
```typescript
import { put } from '@vercel/blob';
export const runtime = 'edge';
export async function POST(request: Request) {
const formData = await request.formData();
const file = formData.get('file') as File;
const blob = await put(file.name, file, { access: 'public' });
return Response.json(blob);
}
```
---
### Step 3: Client-Side Upload (Presigned URLs)
**Create Upload Token (Server Action):**
```typescript
'use server';
import { handleUpload, type HandleUploadBody } from '@vercel/blob/client';
export async function getUploadToken(filename: string) {
const jsonResponse = await handleUpload({
body: {
type: 'blob.generate-client-token',
payload: {
pathname: `uploads/${filename}`,
access: 'public',
onUploadCompleted: {
callbackUrl: `${process.env.NEXT_PUBLIC_URL}/api/upload-complete`
}
}
},
request: new Request('https://dummy'),
onBeforeGenerateToken: async (pathname) => {
// Optional: validate user permissions
return {
allowedContentTypes: ['image/jpeg', 'image/png', 'image/webp'],
maximumSizeInBytes: 5 * 1024 * 1024 // 5MB
};
},
onUploadCompleted: async ({ blob, tokenPayload }) => {
console.log('Upload completed:', blob.url);
}
});
return jsonResponse;
}
```
**Client Upload:**
```typescript
'use client';
import { upload } from '@vercel/blob/client';
import { getUploadToken } from './actions';
export function UploadForm() {
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
const form = e.currentTarget;
const file = (form.elements.namedItem('file') as HTMLInputElement).files?.[0];
if (!file) return;
const tokenResponse = await getUploadToken(file.name);
const blob = await upload(file.name, file, {
access: 'public',
handleUploadUrl: tokenResponse.url
});
console.log('Uploaded:', blob.url);
}
return (
<form onSubmit={handleSubmit}>
<input type="file" name="file" required />
<button type="submit">Upload</button>
</form>
);
}
```
---
### Step 4: List, Download, Delete
**List Files:**
```typescript
import { list } from '@vercel/blob';
const { blobs } = await list({
prefix: 'avatars/',
limit: 100
});
// Returns: { url, pathname, size, uploadedAt, ... }[]
```
**List with Pagination:**
```typescript
let cursor: string | undefined;
const allBlobs = [];
do {
const { blobs, cursor: nextCursor } = await list({
prefix: 'uploads/',
cursor
});
allBlobs.push(...blobs);
cursor = nextCursor;
} while (cursor);
```
**Download File:**
```typescript
// Files are publicly accessible if access: 'public'
const url = 'https://xyz.public.blob.vercel-storage.com/file.pdf';
const response = await fetch(url);
const blob = await response.blob();
```
**Delete File:**
```typescript
import { del } from '@vercel/blob';
await del('https://xyz.public.blob.vercel-storage.com/file.jpg');
// Or delete multiple
await del([url1, url2, url3]);
```
---
### Step 5: Streaming & Multipart
**Streaming Upload:**
```typescript
import { put } from '@vercel/blob';
import { createReadStream } from 'fs';
const stream = createReadStream('./large-file.mp4');
const blob = await put('videos/large-file.mp4', stream, {
access: 'public',
contentType: 'video/mp4'
});
```
**Multipart Upload (Large Files >500MB):**
```typescript
import { createMultipartUpload, uploadPart, completeMultipartUpload } from '@vercel/blob';
// 1. Start multipart upload
const upload = await createMultipartUpload('large-video.mp4', {
access: 'public'
});
// 2. Upload parts (chunks)
const partSize = 100 * 1024 * 1024; // 100MB chunks
const parts = [];
for (let i = 0; i < totalParts; i++) {
const chunk = getChunk(i, partSize);
const part = await uploadPart(chunk, {
uploadId: upload.uploadId,
partNumber: i + 1
});
parts.push(part);
}
// 3. Complete upload
const blob = await completeMultipartUpload({
uploadId: upload.uploadId,
parts
});
```
---
## Critical Rules
### Always Do
✅ **Use client upload tokens for client-side uploads** - Never expose `BLOB_READ_WRITE_TOKEN` to client
✅ **Set correct access level** - `public` (CDN) or `private` (authenticated access)
✅ **Validate file types and sizes** - Before upload, check MIME type and size
✅ **Use pathname organization** - `avatars/`, `uploads/`, `documents/` for structure
✅ **Handle upload errors** - Network failures, size limits, token expiration
✅ **Clean up old files** - Delete unused files to manage storage costs
✅ **Set content-type explicitly** - For correct browser handling (videos, PDFs)
### Never Do
❌ **Never expose `BLOB_READ_WRITE_TOKEN` to client** - Use `handleUpload()` for client uploads
❌ **Never skip file validation** - Always validate type, size, content before upload
❌ **Never upload files >500MB without multipart** - Use multipart upload for large files
❌ **Never use generic filenames** - `file.jpg` collides, use `${timestamp}-${name}` or UUID
❌ **Never assume uploads succeed** - Always handle errors (network, quota, etc.)
❌ **Never store sensitive data unencrypted** - Encrypt before upload if needed
❌ **Never forget to delete temporary files** - Old uploads consume quota
---
## Known Issues Prevention
This skill prevents **10 documented issues**:
### Issue #1: Missing Environment Variable
**Error**: `Error: BLOB_READ_WRITE_TOKEN is not defined`
**Source**: https://vercel.com/docs/storage/vercel-blob
**Why It Happens**: Token not set in environment
**Prevention**: Run `vercel env pull .env.local` and ensure `.env.local` in `.gitignore`.
### Issue #2: Client Upload Token Exposed
**Error**: Security vulnerability, unauthorized uploads
**Source**: https://vercel.com/docs/storage/vercel-blob/client-upload
**Why It Happens**: Using `BLOB_READ_WRITE_TOKEN` directly in client code
**Prevention**: Use `handleUpload()` to generate client-specific tokens with constraints.
### Issue #3: File Size Limit Exceeded
**Error**: `Error: File size exceeds limit` (500MB)
**Source**: https://vercel.com/docs/storage/vercel-blob/limits
**Why It Happens**: Uploading file >500MB without multipart upload
**Prevention**: Validate file size before upload, use multipart upload for large files.
### Issue #4: Wrong Content-Type
**Error**: Browser downloads file instead of displaying (e.g., PDF opens as text)
**Source**: Production debugging
**Why It Happens**: Not setting `contentType` option, Blob guesses incorrectly
**Prevention**: Always set `contentType: file.type` or explicit MIME type.
### Issue #5: Public File Not Cached
**Error**: Slow file delivery, high egress costs
**Source**: Vercel Blob best practices
**Why It Happens**: Using `access: 'private'` for files that should be public
**Prevention**: Use `access: 'public'` for publicly accessible files (CDN caching).
### Issue #6: List Pagination Not Handled
**Error**: Only first 1000 files returned, missing files
**Source**: https://vercel.com/docs/storage/vercel-blob/using-blob-sdk#list
**Why It Happens**: Not iterating with cursor for large file lists
**Prevention**: Use cursor-based pagination in loop until `cursor` is undefined.
### Issue #7: Delete Fails Silently
**Error**: Files not deleted, storage quota fills up
**Source**: https://github.com/vercel/storage/issues/150
**Why It Happens**: Using wrong URL format, blob not found
**Prevention**: Use full blob URL from `put()` response, check deletion result.
### Issue #8: Upload Timeout (Large Files)
**Error**: `Error: Request timeout` for files >100MB
**Source**: Vercel function timeout limits
**Why It Happens**: Serverless function timeout (10s free tier, 60s pro)
**Prevention**: Use client-side upload with `handleUpload()` for large files.
### Issue #9: Filename Collisions
**Error**: Files overwritten, data loss
**Source**: Production debugging
**Why It Happens**: Using same filename for multiple uploads
**Prevention**: Add timestamp/UUID: `` `uploads/${Date.now()}-${file.name}` `` or `addRandomSuffix: true`.
### Issue #10: Missing Upload Callback
**Error**: Upload completes but app state not updated
**Source**: https://vercel.com/docs/storage/vercel-blob/client-upload#callback-after-upload
**Why It Happens**: Not implementing `onUploadCompleted` callback
**Prevention**: Use `onUploadCompleted` in `handleUpload()` to update database/state.
---
## Configuration Files Reference
### package.json
```json
{
"dependencies": {
"@vercel/blob": "^2.0.0"
}
}
```
### .env.local
```bash
BLOB_READ_WRITE_TOKEN="vercel_blob_rw_xxxxx"
```
---
## Common Patterns
### Pattern 1: Avatar Upload
```typescript
'use server';
import { put, del } from '@vercel/blob';
export async function updateAvatar(userId: string, formData: FormData) {
const file = formData.get('avatar') as File;
// Validate
if (!file.type.startsWith('image/')) {
throw new Error('Only images allowed');
}
// Delete old avatar
const user = await db.query.users.findFirst({ where: eq(users.id, userId) });
if (user?.avatarUrl) {
await del(user.avatarUrl);
}
// Upload new
const blob = await put(`avatars/${userId}.jpg`, file, {
access: 'public',
contentType: file.type
});
// Update database
await db.update(users).set({ avatarUrl: blob.url }).where(eq(users.id, userId));
return blob.url;
}
```
### Pattern 2: Protected File Upload
```typescript
'use server';
import { put } from '@vercel/blob';
import { auth } from '@/lib/auth';
export async function uploadDocument(formData: FormData) {
const session = await auth();
if (!session) throw new Error('Unauthorized');
const file = formData.get('document') as File;
// Upload as private
const blob = await put(`documents/${session.user.id}/${file.name}`, file, {
access: 'private' // Requires authentication to access
});
// Store in database with user reference
await db.insert(documents).values({
userId: session.user.id,
url: blob.url,
filename: file.name,
size: file.size
});
return blob;
}
```
### Pattern 3: Image Gallery with Pagination
```typescript
import { list } from '@vercel/blob';
export async function getGalleryImages(cursor?: string) {
const { blobs, cursor: nextCursor } = await list({
prefix: 'gallery/',
limit: 20,
cursor
});
const images = blobs.map(blob => ({
url: blob.url,
uploadedAt: blob.uploadedAt,
size: blob.size
}));
return { images, nextCursor };
}
```
---
## Dependencies
**Required**:
- `@vercel/blob@^2.0.0` - Vercel Blob SDK
**Optional**:
- `sharp@^0.33.0` - Image processing before upload
- `zod@^3.24.0` - File validation schemas
---
## Official Documentation
- **Vercel Blob**: https://vercel.com/docs/storage/vercel-blob
- **Client Upload**: https://vercel.com/docs/storage/vercel-blob/client-upload
- **SDK Reference**: https://vercel.com/docs/storage/vercel-blob/using-blob-sdk
- **GitHub**: https://github.com/vercel/storage
---
## Package Versions (Verified 2025-10-29)
```json
{
"dependencies": {
"@vercel/blob": "^2.0.0"
}
}
```
---
## Production Example
- **E-commerce**: Product images, user uploads (500K+ files)
- **Blog Platform**: Featured images, author avatars
- **SaaS**: Document uploads, PDF generation, CSV exports
- **Errors**: 0 (all 10 known issues prevented)
---
## Troubleshooting
### Problem: `BLOB_READ_WRITE_TOKEN is not defined`
**Solution**: Run `vercel env pull .env.local`, ensure `.env.local` in `.gitignore`.
### Problem: File size exceeded (>500MB)
**Solution**: Use multipart upload with `createMultipartUpload()` API.
### Problem: Client upload fails with token error
**Solution**: Ensure using `handleUpload()` server-side, don't expose read/write token to client.
### Problem: Files not deleting
**Solution**: Use exact URL from `put()` response, check `del()` return value.
---
## Complete Setup Checklist
- [ ] Blob store created in Vercel dashboard
- [ ] `BLOB_READ_WRITE_TOKEN` environment variable set
- [ ] `@vercel/blob` package installed
- [ ] File validation implemented (type, size)
- [ ] Client upload uses `handleUpload()` (not direct token)
- [ ] Content-type set for uploads
- [ ] Access level correct (`public` vs `private`)
- [ ] Deletion of old files implemented
- [ ] List pagination handles cursor
- [ ] Tested file upload/download/delete locally and in production
---
**Questions? Issues?**
1. Check official docs: https://vercel.com/docs/storage/vercel-blob
2. Verify environment variables are set
3. Ensure using client upload tokens for client-side uploads
4. Monitor storage usage in Vercel dashboard

14
assets/example-template.txt Normal file
View File

@@ -0,0 +1,14 @@
[TODO: Example Template File]
[TODO: This directory contains files that will be used in the OUTPUT that Claude produces.]
[TODO: Examples:]
- Templates (.html, .tsx, .md)
- Images (.png, .svg)
- Fonts (.ttf, .woff)
- Boilerplate code
- Configuration file templates
[TODO: Delete this file and add your actual assets]
These files are NOT loaded into context. They are copied or used directly in the final output.

73
plugin.lock.json Normal file
View File

@@ -0,0 +1,73 @@
{
"$schema": "internal://schemas/plugin.lock.v1.json",
"pluginId": "gh:jezweb/claude-skills:skills/vercel-blob",
"normalized": {
"repo": null,
"ref": "refs/tags/v20251128.0",
"commit": "e1cf225b01b9ff6d0d265dc7ef5ad677b3ef9d25",
"treeHash": "00bda40f2b89a283149e73245132f0ba9e16022a8ec748d30123f2b47cb88226",
"generatedAt": "2025-11-28T10:19:04.596149Z",
"toolVersion": "publish_plugins.py@0.2.0"
},
"origin": {
"remote": "git@github.com:zhongweili/42plugin-data.git",
"branch": "master",
"commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390",
"repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data"
},
"manifest": {
"name": "vercel-blob",
"description": "Integrate Vercel Blob object storage for file uploads, image management, and CDN-delivered assets in Next.js applications. Supports client-side uploads with presigned URLs and multipart transfers. Use when implementing file uploads (images, PDFs, videos), managing user-generated content, or troubleshooting missing tokens, size limit errors, or client upload failures.",
"version": "1.0.0"
},
"content": {
"files": [
{
"path": "README.md",
"sha256": "a237e7ca882414f24e91edf479e4eaea9c8e50bfe4bd7cb40df0b789cf714c8f"
},
{
"path": "SKILL.md",
"sha256": "02cc6c5f2ad73e3ebb06bfd33eefb22ee77a67d830e2410d518fbf796756eaef"
},
{
"path": "references/example-reference.md",
"sha256": "77c788d727d05d6479a61d6652b132e43882ffc67c145bb46ba880567d83f7f8"
},
{
"path": "scripts/example-script.sh",
"sha256": "83d2b09d044811608e17cbd8e66d993b1e9998c7bd3379a42ab81fbdba973e0e"
},
{
"path": ".claude-plugin/plugin.json",
"sha256": "6e0827da406962438ba09db0c63adccd8fc7c950fef13f24fca4e2e56aea969a"
},
{
"path": "templates/avatar-upload-flow.tsx",
"sha256": "6a35017b470ee76c04904c3267d46387a95aa6232483421896bfa420ae53edca"
},
{
"path": "templates/package.json",
"sha256": "c5045dbf0bf496df1587dc5145c86b8a9e49bbedc00b56533747bda326c1ed4d"
},
{
"path": "templates/drag-drop-upload.tsx",
"sha256": "375ff7175cc29b5762753732f54ef96d85a300ea68a41f61faa47236ce35c568"
},
{
"path": "templates/file-list-manager.tsx",
"sha256": "167a9e11246a5941ead5f7e2b3cce6244ae4dc8d024554ec62a7e6c12302eb2a"
},
{
"path": "assets/example-template.txt",
"sha256": "3f725c80d70847fd8272bf1400515ba753f12f98f3b294d09e50b54b4c1b024a"
}
],
"dirSha256": "00bda40f2b89a283149e73245132f0ba9e16022a8ec748d30123f2b47cb88226"
},
"security": {
"scannedAt": null,
"scannerVersion": null,
"flags": []
}
}

26
references/example-reference.md Normal file
View File

@@ -0,0 +1,26 @@
# [TODO: Reference Document Name]
[TODO: This file contains reference documentation that Claude can load when needed.]
[TODO: Delete this file if you don't have reference documentation to provide.]
## Purpose
[TODO: Explain what information this document contains]
## When Claude Should Use This
[TODO: Describe specific scenarios where Claude should load this reference]
## Content
[TODO: Add your reference content here - schemas, guides, specifications, etc.]
---
**Note**: This file is NOT loaded into context by default. Claude will only load it when:
- It determines the information is needed
- You explicitly ask Claude to reference it
- The SKILL.md instructions direct Claude to read it
Keep this file under 10k words for best performance.

15
scripts/example-script.sh Executable file
View File

@@ -0,0 +1,15 @@
#!/bin/bash
# [TODO: Script Name]
# [TODO: Brief description of what this script does]
# Example script structure - delete if not needed
set -e # Exit on error
# [TODO: Add your script logic here]
echo "Example script - replace or delete this file"
# Usage:
# ./scripts/example-script.sh [args]

347
templates/avatar-upload-flow.tsx Normal file
View File

@@ -0,0 +1,347 @@
'use client';
// Complete Avatar Upload Flow for Vercel Blob
// Includes image preview, crop preview (optional), upload, and update
import { useState, useRef } from 'react';
import { put, del } from '@vercel/blob';
interface AvatarUploadProps {
userId: string;
currentAvatarUrl?: string;
onAvatarUpdate?: (url: string) => void;
}
export function AvatarUploadFlow({ userId, currentAvatarUrl, onAvatarUpdate }: AvatarUploadProps) {
const [avatarUrl, setAvatarUrl] = useState(currentAvatarUrl || '');
const [previewUrl, setPreviewUrl] = useState<string>('');
const [file, setFile] = useState<File | null>(null);
const [isUploading, setIsUploading] = useState(false);
const [error, setError] = useState('');
const fileInputRef = useRef<HTMLInputElement>(null);
// Validate image file
const validateImage = (file: File): string | null => {
const maxSize = 5 * 1024 * 1024; // 5MB
const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];
if (!allowedTypes.includes(file.type)) {
return 'Only JPEG, PNG, and WebP images are allowed';
}
if (file.size > maxSize) {
return 'Image must be smaller than 5MB';
}
return null;
};
// Handle file selection
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
const selectedFile = e.target.files?.[0];
if (!selectedFile) return;
const validationError = validateImage(selectedFile);
if (validationError) {
setError(validationError);
return;
}
setFile(selectedFile);
setError('');
// Create preview
const reader = new FileReader();
reader.onloadend = () => {
setPreviewUrl(reader.result as string);
};
reader.readAsDataURL(selectedFile);
};
// Handle upload
const handleUpload = async () => {
if (!file) return;
setIsUploading(true);
setError('');
try {
// Delete old avatar if exists
if (avatarUrl) {
try {
await del(avatarUrl);
} catch (err) {
console.error('Failed to delete old avatar:', err);
// Continue with upload even if delete fails
}
}
// Upload new avatar
const blob = await put(`avatars/${userId}.jpg`, file, {
access: 'public',
contentType: file.type,
addRandomSuffix: false // Always use same filename for user
});
setAvatarUrl(blob.url);
setPreviewUrl('');
setFile(null);
// Reset file input
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
// Callback to parent
if (onAvatarUpdate) {
onAvatarUpdate(blob.url);
}
} catch (err) {
console.error('Upload failed:', err);
setError(err instanceof Error ? err.message : 'Upload failed');
} finally {
setIsUploading(false);
}
};
// Cancel preview
const handleCancel = () => {
setFile(null);
setPreviewUrl('');
setError('');
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
};
// Trigger file input
const triggerFileInput = () => {
fileInputRef.current?.click();
};
return (
<div className="max-w-md mx-auto p-6">
<h2 className="text-2xl font-bold mb-6">Profile Picture</h2>
<div className="space-y-4">
{/* Current or Preview Avatar */}
<div className="relative w-48 h-48 mx-auto">
<div className="w-full h-full rounded-full overflow-hidden bg-gray-200 flex items-center justify-center">
{previewUrl || avatarUrl ? (
<img
src={previewUrl || avatarUrl}
alt="Avatar"
className="w-full h-full object-cover"
/>
) : (
<svg className="w-24 h-24 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
)}
</div>
{/* Edit overlay */}
{!previewUrl && (
<button
onClick={triggerFileInput}
className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded-full opacity-0 hover:opacity-100 transition-opacity"
>
<svg className="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
)}
</div>
{/* Hidden file input */}
<input
ref={fileInputRef}
type="file"
accept="image/jpeg,image/png,image/webp"
onChange={handleFileSelect}
className="hidden"
/>
{/* Error message */}
{error && (
<div className="p-3 bg-red-50 border border-red-200 rounded text-sm text-red-600">
{error}
</div>
)}
{/* File info */}
{file && (
<div className="p-3 bg-blue-50 border border-blue-200 rounded">
<p className="text-sm font-medium">{file.name}</p>
<p className="text-xs text-gray-600">
{(file.size / 1024).toFixed(1)} KB · {file.type}
</p>
</div>
)}
{/* Action buttons */}
{previewUrl ? (
<div className="flex gap-2">
<button
onClick={handleUpload}
disabled={isUploading}
className="flex-1 py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
>
{isUploading ? 'Uploading...' : 'Upload Avatar'}
</button>
<button
onClick={handleCancel}
disabled={isUploading}
className="px-4 py-2 border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-50"
>
Cancel
</button>
</div>
) : (
<button
onClick={triggerFileInput}
className="w-full py-2 px-4 border border-gray-300 rounded hover:bg-gray-50"
>
{avatarUrl ? 'Change Picture' : 'Upload Picture'}
</button>
)}
{/* Current avatar URL */}
{avatarUrl && !previewUrl && (
<div className="text-xs text-gray-500 break-all">
<a href={avatarUrl} target="_blank" rel="noopener noreferrer" className="hover:underline">
View full size →
</a>
</div>
)}
</div>
</div>
);
}
// ============================================================================
// SERVER ACTION VERSION (Next.js Server Actions)
// ============================================================================
/*
'use server';
import { put, del } from '@vercel/blob';
import { revalidatePath } from 'next/cache';
export async function updateAvatar(userId: string, formData: FormData) {
const file = formData.get('avatar') as File;
const currentAvatarUrl = formData.get('currentAvatarUrl') as string;
if (!file) {
throw new Error('No file provided');
}
// Validate
const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];
if (!allowedTypes.includes(file.type)) {
throw new Error('Invalid file type');
}
if (file.size > 5 * 1024 * 1024) {
throw new Error('File too large (max 5MB)');
}
// Delete old avatar
if (currentAvatarUrl) {
try {
await del(currentAvatarUrl);
} catch (error) {
console.error('Failed to delete old avatar:', error);
}
}
// Upload new avatar
const blob = await put(`avatars/${userId}.jpg`, file, {
access: 'public',
contentType: file.type,
addRandomSuffix: false
});
// Update database
await db.update(users).set({ avatarUrl: blob.url }).where(eq(users.id, userId));
revalidatePath('/profile');
return blob.url;
}
*/
// ============================================================================
// CLIENT COMPONENT USING SERVER ACTION
// ============================================================================
/*
'use client';
import { useState } from 'react';
import { updateAvatar } from './actions';
export function AvatarUploadWithServerAction({ userId, currentAvatarUrl }: Props) {
const [avatarUrl, setAvatarUrl] = useState(currentAvatarUrl || '');
const [previewUrl, setPreviewUrl] = useState('');
const [isUploading, setIsUploading] = useState(false);
const [error, setError] = useState('');
async function handleSubmit(formData: FormData) {
setIsUploading(true);
setError('');
try {
formData.append('currentAvatarUrl', avatarUrl);
const newUrl = await updateAvatar(userId, formData);
setAvatarUrl(newUrl);
setPreviewUrl('');
} catch (err) {
setError(err instanceof Error ? err.message : 'Upload failed');
} finally {
setIsUploading(false);
}
}
return (
<form action={handleSubmit}>
<input type="file" name="avatar" accept="image/*" required />
<button type="submit" disabled={isUploading}>
{isUploading ? 'Uploading...' : 'Upload'}
</button>
</form>
);
}
*/
// ============================================================================
// WITH IMAGE OPTIMIZATION (Sharp)
// ============================================================================
/*
// Server-side optimization before upload
import sharp from 'sharp';
export async function uploadOptimizedAvatar(file: File) {
const buffer = Buffer.from(await file.arrayBuffer());
// Resize and optimize
const optimized = await sharp(buffer)
.resize(400, 400, {
fit: 'cover',
position: 'center'
})
.jpeg({ quality: 85 })
.toBuffer();
// Upload optimized version
const blob = await put(`avatars/${userId}.jpg`, optimized, {
access: 'public',
contentType: 'image/jpeg'
});
return blob.url;
}
*/

327
templates/drag-drop-upload.tsx Normal file
View File

@@ -0,0 +1,327 @@
'use client';
// Drag & Drop File Upload Component for Vercel Blob
// Complete component with progress tracking, file preview, and error handling
import { useState, useCallback } from 'react';
import { upload } from '@vercel/blob/client';
interface UploadedFile {
url: string;
pathname: string;
name: string;
size: number;
}
export function DragDropUpload() {
const [isDragging, setIsDragging] = useState(false);
const [files, setFiles] = useState<File[]>([]);
const [uploadProgress, setUploadProgress] = useState<Record<string, number>>({});
const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
const [errors, setErrors] = useState<Record<string, string>>({});
const [isUploading, setIsUploading] = useState(false);
// File validation
const validateFile = (file: File): string | null => {
const maxSize = 10 * 1024 * 1024; // 10MB
const allowedTypes = ['image/jpeg', 'image/png', 'image/webp', 'image/gif', 'application/pdf'];
if (file.size > maxSize) {
return `File too large. Max size: 10MB`;
}
if (!allowedTypes.includes(file.type)) {
return `Invalid file type. Allowed: JPEG, PNG, WebP, GIF, PDF`;
}
return null;
};
// Handle drag events
const handleDragEnter = useCallback((e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
setIsDragging(true);
}, []);
const handleDragLeave = useCallback((e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
setIsDragging(false);
}, []);
const handleDragOver = useCallback((e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
}, []);
const handleDrop = useCallback((e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
setIsDragging(false);
const droppedFiles = Array.from(e.dataTransfer.files);
handleFiles(droppedFiles);
}, []);
// Handle file selection
const handleFileInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files) {
const selectedFiles = Array.from(e.target.files);
handleFiles(selectedFiles);
}
}, []);
const handleFiles = (newFiles: File[]) => {
const validFiles: File[] = [];
const newErrors: Record<string, string> = {};
newFiles.forEach((file) => {
const error = validateFile(file);
if (error) {
newErrors[file.name] = error;
} else {
validFiles.push(file);
}
});
setFiles((prev) => [...prev, ...validFiles]);
setErrors((prev) => ({ ...prev, ...newErrors }));
};
// Remove file from list
const removeFile = (fileName: string) => {
setFiles((prev) => prev.filter((f) => f.name !== fileName));
setErrors((prev) => {
const newErrors = { ...prev };
delete newErrors[fileName];
return newErrors;
});
};
// Upload files
const handleUpload = async () => {
if (files.length === 0) return;
setIsUploading(true);
const newUploadedFiles: UploadedFile[] = [];
for (const file of files) {
try {
// Update progress
setUploadProgress((prev) => ({ ...prev, [file.name]: 0 }));
// Get upload token from server
const tokenResponse = await fetch('/api/upload-token', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ filename: file.name })
});
if (!tokenResponse.ok) {
throw new Error('Failed to get upload token');
}
const { url: handleUploadUrl } = await tokenResponse.json();
// Upload file
const blob = await upload(file.name, file, {
access: 'public',
handleUploadUrl,
onUploadProgress: (progressEvent) => {
const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
setUploadProgress((prev) => ({ ...prev, [file.name]: progress }));
}
});
newUploadedFiles.push({
url: blob.url,
pathname: blob.pathname,
name: file.name,
size: file.size
});
// Mark complete
setUploadProgress((prev) => ({ ...prev, [file.name]: 100 }));
} catch (error) {
console.error(`Failed to upload ${file.name}:`, error);
setErrors((prev) => ({
...prev,
[file.name]: error instanceof Error ? error.message : 'Upload failed'
}));
}
}
setUploadedFiles((prev) => [...prev, ...newUploadedFiles]);
setFiles([]);
setIsUploading(false);
setUploadProgress({});
};
// Format file size
const formatSize = (bytes: number): string => {
if (bytes < 1024) return `${bytes} B`;
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
};
return (
<div className="max-w-2xl mx-auto p-6">
<h2 className="text-2xl font-bold mb-6">Upload Files</h2>
{/* Drag & Drop Zone */}
<div
onDragEnter={handleDragEnter}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
className={`
border-2 border-dashed rounded-lg p-8 text-center transition-colors
${isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300'}
`}
>
<input
type="file"
multiple
onChange={handleFileInput}
className="hidden"
id="file-input"
accept="image/*,application/pdf"
/>
<label htmlFor="file-input" className="cursor-pointer">
<div className="space-y-2">
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
</svg>
<p className="text-lg text-gray-600">
Drag & drop files here, or click to select
</p>
<p className="text-sm text-gray-500">
Max 10MB · JPEG, PNG, WebP, GIF, PDF
</p>
</div>
</label>
</div>
{/* Selected Files List */}
{files.length > 0 && (
<div className="mt-6 space-y-2">
<h3 className="font-semibold">Selected Files ({files.length})</h3>
{files.map((file) => (
<div key={file.name} className="flex items-center justify-between p-3 bg-gray-50 rounded">
<div className="flex-1">
<p className="text-sm font-medium">{file.name}</p>
<p className="text-xs text-gray-500">{formatSize(file.size)}</p>
{/* Progress bar */}
{uploadProgress[file.name] !== undefined && (
<div className="mt-2">
<div className="h-2 bg-gray-200 rounded-full overflow-hidden">
<div
className="h-full bg-blue-500 transition-all"
style={{ width: `${uploadProgress[file.name]}%` }}
/>
</div>
<p className="text-xs text-gray-500 mt-1">{uploadProgress[file.name]}%</p>
</div>
)}
{/* Error message */}
{errors[file.name] && (
<p className="text-xs text-red-500 mt-1">{errors[file.name]}</p>
)}
</div>
<button
onClick={() => removeFile(file.name)}
disabled={isUploading}
className="ml-4 text-red-500 hover:text-red-700 disabled:opacity-50"
>
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
))}
<button
onClick={handleUpload}
disabled={isUploading || files.length === 0}
className="mt-4 w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
>
{isUploading ? 'Uploading...' : `Upload ${files.length} file${files.length !== 1 ? 's' : ''}`}
</button>
</div>
)}
{/* Uploaded Files */}
{uploadedFiles.length > 0 && (
<div className="mt-8 space-y-2">
<h3 className="font-semibold">Uploaded Files ({uploadedFiles.length})</h3>
{uploadedFiles.map((file) => (
<div key={file.url} className="flex items-center justify-between p-3 bg-green-50 rounded">
<div className="flex-1">
<p className="text-sm font-medium">{file.name}</p>
<p className="text-xs text-gray-500">{formatSize(file.size)}</p>
<a
href={file.url}
target="_blank"
rel="noopener noreferrer"
className="text-xs text-blue-500 hover:underline"
>
View file
</a>
</div>
<svg className="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
</div>
))}
</div>
)}
</div>
);
}
// ============================================================================
// SERVER: API Route for Upload Token
// ============================================================================
// app/api/upload-token/route.ts
/*
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) => {
// Validate user is authenticated
// const session = await getSession();
// if (!session) throw new Error('Unauthorized');
return {
allowedContentTypes: ['image/jpeg', 'image/png', 'image/webp', 'image/gif', 'application/pdf'],
maximumSizeInBytes: 10 * 1024 * 1024, // 10MB
};
},
onUploadCompleted: async ({ blob, tokenPayload }) => {
// Optional: Save to database
console.log('Upload completed:', blob.url);
},
});
return NextResponse.json(jsonResponse);
} catch (error) {
return NextResponse.json(
{ error: (error as Error).message },
{ status: 400 }
);
}
}
*/

318
templates/file-list-manager.tsx Normal file
View File

@@ -0,0 +1,318 @@
'use client';
// File List Manager for Vercel Blob
// Display uploaded files with delete and download actions
import { useState, useEffect } from 'react';
import { list, del, type ListBlobResult } from '@vercel/blob';
interface BlobFile {
url: string;
pathname: string;
size: number;
uploadedAt: Date;
}
export function FileListManager({ prefix = '' }: { prefix?: string }) {
const [files, setFiles] = useState<BlobFile[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState('');
const [deletingFiles, setDeletingFiles] = useState<Set<string>>(new Set());
const [cursor, setCursor] = useState<string | undefined>();
const [hasMore, setHasMore] = useState(false);
// Load files
const loadFiles = async (loadMore = false) => {
setIsLoading(true);
setError('');
try {
const response = await fetch(`/api/files?prefix=${prefix}&cursor=${cursor || ''}`);
if (!response.ok) {
throw new Error('Failed to load files');
}
const data: { blobs: BlobFile[]; cursor?: string; hasMore: boolean } = await response.json();
if (loadMore) {
setFiles((prev) => [...prev, ...data.blobs]);
} else {
setFiles(data.blobs);
}
setCursor(data.cursor);
setHasMore(data.hasMore);
} catch (err) {
console.error('Failed to load files:', err);
setError(err instanceof Error ? err.message : 'Failed to load files');
} finally {
setIsLoading(false);
}
};
// Initial load
useEffect(() => {
loadFiles();
}, [prefix]);
// Delete file
const handleDelete = async (url: string, pathname: string) => {
if (!confirm(`Delete ${pathname}?`)) return;
setDeletingFiles((prev) => new Set(prev).add(url));
try {
const response = await fetch('/api/files', {
method: 'DELETE',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ url })
});
if (!response.ok) {
throw new Error('Failed to delete file');
}
// Remove from list
setFiles((prev) => prev.filter((f) => f.url !== url));
} catch (err) {
console.error('Failed to delete file:', err);
alert(err instanceof Error ? err.message : 'Failed to delete file');
} finally {
setDeletingFiles((prev) => {
const next = new Set(prev);
next.delete(url);
return next;
});
}
};
// Download file
const handleDownload = (url: string, filename: string) => {
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
// Format file size
const formatSize = (bytes: number): string => {
if (bytes < 1024) return `${bytes} B`;
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
};
// Format date
const formatDate = (date: Date): string => {
return new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
}).format(new Date(date));
};
// Get file icon
const getFileIcon = (pathname: string) => {
const ext = pathname.split('.').pop()?.toLowerCase();
if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext || '')) {
return (
<svg className="w-5 h-5 text-purple-500" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clipRule="evenodd" />
</svg>
);
}
if (ext === 'pdf') {
return (
<svg className="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clipRule="evenodd" />
</svg>
);
}
return (
<svg className="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clipRule="evenodd" />
</svg>
);
};
return (
<div className="max-w-4xl mx-auto p-6">
<div className="flex items-center justify-between mb-6">
<h2 className="text-2xl font-bold">Files</h2>
<button
onClick={() => loadFiles()}
disabled={isLoading}
className="px-4 py-2 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-50"
>
{isLoading ? 'Loading...' : 'Refresh'}
</button>
</div>
{error && (
<div className="mb-4 p-4 bg-red-50 border border-red-200 rounded text-red-600">
{error}
</div>
)}
{files.length === 0 && !isLoading && (
<div className="text-center py-12 text-gray-500">
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
<p className="mt-2">No files uploaded yet</p>
</div>
)}
{files.length > 0 && (
<div className="space-y-2">
{files.map((file) => {
const isDeleting = deletingFiles.has(file.url);
const filename = file.pathname.split('/').pop() || file.pathname;
return (
<div
key={file.url}
className="flex items-center gap-4 p-4 bg-white border border-gray-200 rounded hover:bg-gray-50"
>
{/* File icon */}
<div className="flex-shrink-0">
{getFileIcon(file.pathname)}
</div>
{/* File info */}
<div className="flex-1 min-w-0">
<p className="font-medium truncate">{filename}</p>
<p className="text-sm text-gray-500">
{formatSize(file.size)} · {formatDate(file.uploadedAt)}
</p>
</div>
{/* Actions */}
<div className="flex items-center gap-2">
<button
onClick={() => window.open(file.url, '_blank')}
className="p-2 text-gray-600 hover:text-gray-900"
title="View"
>
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</button>
<button
onClick={() => handleDownload(file.url, filename)}
className="p-2 text-gray-600 hover:text-gray-900"
title="Download"
>
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
</button>
<button
onClick={() => handleDelete(file.url, filename)}
disabled={isDeleting}
className="p-2 text-red-600 hover:text-red-900 disabled:opacity-50"
title="Delete"
>
{isDeleting ? (
<svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
) : (
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
)}
</button>
</div>
</div>
);
})}
</div>
)}
{/* Load more */}
{hasMore && (
<button
onClick={() => loadFiles(true)}
disabled={isLoading}
className="mt-4 w-full py-2 px-4 border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-50"
>
{isLoading ? 'Loading...' : 'Load More'}
</button>
)}
</div>
);
}
// ============================================================================
// SERVER: API Route for List & Delete
// ============================================================================
// app/api/files/route.ts
/*
import { list, del } from '@vercel/blob';
import { NextResponse } from 'next/server';
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const prefix = searchParams.get('prefix') || '';
const cursor = searchParams.get('cursor') || undefined;
try {
const { blobs, cursor: nextCursor, hasMore } = await list({
prefix,
limit: 20,
cursor
});
return NextResponse.json({
blobs: blobs.map(blob => ({
url: blob.url,
pathname: blob.pathname,
size: blob.size,
uploadedAt: blob.uploadedAt
})),
cursor: nextCursor,
hasMore
});
} catch (error) {
return NextResponse.json(
{ error: 'Failed to list files' },
{ status: 500 }
);
}
}
export async function DELETE(request: Request) {
try {
const { url } = await request.json();
if (!url) {
return NextResponse.json(
{ error: 'URL is required' },
{ status: 400 }
);
}
await del(url);
return NextResponse.json({ success: true });
} catch (error) {
return NextResponse.json(
{ error: 'Failed to delete file' },
{ status: 500 }
);
}
}
*/

23
templates/package.json Normal file
View File

@@ -0,0 +1,23 @@
{
"name": "vercel-blob-project",
"version": "1.0.0",
"description": "Vercel Blob file storage",
"type": "module",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@vercel/blob": "^2.0.0",
"next": "^15.2.0",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@types/node": "^22.0.0",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"typescript": "^5.7.0"
}
}