How to Integrate Backblaze B2 Cloud Storage with V0

Before writing code, set up your Backblaze B2 storage infrastructure. Log into your Backblaze account at backblaze.com and navigate to 'B2 Cloud Storage' in the left sidebar. Click 'Create a Bucket' to create your first bucket. Choose a unique bucket name (it must be globally unique across all Backblaze accounts), select your region (choose the region closest to your users for best performance), and decide on public vs. private access. For most applications, select 'Private' — this requires application key authentication for all access and is the secure default. For public media libraries (images, files you want publicly accessible via URL), select 'Public'. After creating the bucket, create an Application Key with appropriate permissions. Go to 'App Keys' in the Backblaze sidebar and click 'Add a New Application Key'. Give the key a descriptive name, select your bucket (or 'All Buckets'), and set the permissions: 'Read and Write' is typical for an upload+download flow. For read-only access (download/list only), choose 'Read Only'. After creating the key, Backblaze shows you the Key ID and Application Key (secret). Copy both values immediately — the Application Key is shown only once. Also note your bucket's endpoint URL format: https://s3.{region}.backblazeb2.com — for example, https://s3.us-west-004.backblazeb2.com if your bucket is in the us-west-004 region. This S3-compatible endpoint is what you'll use in the AWS SDK configuration.

Install the AWS SDK v3 packages needed for S3-compatible operations. You need two packages: @aws-sdk/client-s3 for the main S3 client and operations, and @aws-sdk/s3-request-presigner for generating pre-signed URLs that allow browser-to-B2 direct uploads. Run npm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner in your project. These packages total about 2-3MB and support tree-shaking, so only the commands you use are bundled in production. Create a shared B2 client utility that configures the AWS SDK to use Backblaze's S3-compatible endpoint instead of AWS. The key differences from a standard AWS S3 configuration are: the endpoint URL points to B2's region-specific endpoint, the region is set to the B2 region code (e.g., 'us-west-004'), and the credentials use your B2 Key ID as the Access Key and B2 Application Key as the Secret Key. PathStyleForcing (forcePathStyle: true) is important for B2 compatibility — B2's S3 API uses path-style URLs (e.g., https://s3.us-west-004.backblazeb2.com/bucket-name/file-key) rather than virtual-hosted-style URLs (https://bucket-name.s3.amazonaws.com/file-key). Setting forcePathStyle: true ensures the SDK uses the path-style format that B2 expects.

1// lib/b2.ts — Shared Backblaze B2 client
2import { S3Client } from '@aws-sdk/client-s3';
3
4const B2_REGION = process.env.B2_REGION || 'us-west-004';
5
6export const b2Client = new S3Client({
7  endpoint: `https://s3.${B2_REGION}.backblazeb2.com`,
8  region: B2_REGION,
9  credentials: {
10    accessKeyId: process.env.B2_KEY_ID!,
11    secretAccessKey: process.env.B2_APPLICATION_KEY!,
12  },
13  forcePathStyle: true, // Required for B2 compatibility
14});
15
16export const B2_BUCKET = process.env.B2_BUCKET_NAME!;
17export const B2_PUBLIC_URL = `https://${B2_BUCKET}.s3.${B2_REGION}.backblazeb2.com`;

Build the Next.js API routes for file operations. The recommended pattern for browser uploads is pre-signed URLs — your API route generates a time-limited URL that the browser can POST directly to B2, avoiding routing large files through Vercel's serverless function (which has a 4.5MB request body limit). For the upload flow: (1) The browser sends the filename, content type, and file size to your /api/files/upload-url route. (2) The route generates a pre-signed PUT URL with a 15-minute expiry. (3) The browser receives the URL and uploads the file directly to B2 using a PUT request. (4) After upload, the browser calls /api/files/save to record the file metadata in your database. This pattern supports files of any size and doesn't consume Vercel serverless execution time for the actual upload. For the download flow: generate pre-signed GET URLs for private buckets. For public buckets, construct the URL directly without signing. For listing files, use the ListObjectsV2Command to return all objects in the bucket with their keys, sizes, and last-modified dates. Deletion uses the DeleteObjectCommand with the file key. Make sure to verify user authorization before deleting files — check that the requesting user owns the file before deleting it from B2.

1// app/api/files/upload-url/route.ts
2import { NextResponse } from 'next/server';
3import { PutObjectCommand } from '@aws-sdk/client-s3';
4import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
5import { b2Client, B2_BUCKET } from '@/lib/b2';
6import { randomUUID } from 'crypto';
7
8export async function POST(request: Request) {
9  const { filename, contentType, fileSize } = await request.json();
10
11  if (!filename || !contentType) {
12    return NextResponse.json({ error: 'filename and contentType required' }, { status: 400 });
13  }
14
15  // Limit file size to 100MB
16  if (fileSize > 100 * 1024 * 1024) {
17    return NextResponse.json({ error: 'File size exceeds 100MB limit' }, { status: 400 });
18  }
19
20  const key = `uploads/${randomUUID()}-${filename.replace(/[^a-zA-Z0-9._-]/g, '_')}`;
21
22  const command = new PutObjectCommand({
23    Bucket: B2_BUCKET,
24    Key: key,
25    ContentType: contentType,
26    ContentLength: fileSize,
27  });
28
29  const uploadUrl = await getSignedUrl(b2Client, command, { expiresIn: 900 }); // 15 minutes
30
31  return NextResponse.json({ uploadUrl, key });
32}
33
34// app/api/files/route.ts — List and delete files
35import { ListObjectsV2Command, DeleteObjectCommand, GetObjectCommand } from '@aws-sdk/client-s3';
36import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
37import { b2Client, B2_BUCKET } from '@/lib/b2';
38
39export async function GET() {
40  const command = new ListObjectsV2Command({
41    Bucket: B2_BUCKET,
42    Prefix: 'uploads/',
43    MaxKeys: 100,
44  });
45
46  const data = await b2Client.send(command);
47
48  const files = (data.Contents || []).map((obj) => ({
49    key: obj.Key!,
50    filename: obj.Key!.split('/').pop() || obj.Key!,
51    size: obj.Size || 0,
52    lastModified: obj.LastModified?.toISOString(),
53  }));
54
55  return NextResponse.json({ files });
56}
57
58export async function DELETE(request: Request) {
59  const { key } = await request.json();
60  await b2Client.send(new DeleteObjectCommand({ Bucket: B2_BUCKET, Key: key }));
61  return NextResponse.json({ success: true });
62}

Store your Backblaze B2 credentials in Vercel's environment variable system. You need four values: B2 Key ID, B2 Application Key, bucket name, and region. The Key ID and Application Key are server-only secrets — they must never be accessible to the browser. In Vercel Dashboard → Settings → Environment Variables, create four variables: B2_KEY_ID (the numeric Key ID from Backblaze), B2_APPLICATION_KEY (the 31-character application key shown when you created the key — if you lost it, create a new one), B2_BUCKET_NAME (your bucket name), and B2_REGION (your bucket's region code, e.g., 'us-west-004'). All four should be server-only — no NEXT_PUBLIC_ prefix — because they're only used in API routes. Select all three scopes (Production, Preview, Development) for each variable. For local development, add all four to .env.local. If you lost your Application Key (Backblaze only shows it once), go to Backblaze console → App Keys, delete the old key, and create a new one with the same permissions. After creating the new key, update LEADSQUARED_APPLICATION_KEY in all environments where it's used. After saving all variables in Vercel, trigger a redeployment for the changes to take effect.

1# .env.local
2B2_KEY_ID=your_b2_key_id_here
3B2_APPLICATION_KEY=your_b2_application_key_here
4B2_BUCKET_NAME=your-bucket-name
5B2_REGION=us-west-004

Update the V0-generated file manager component to perform actual uploads and file listing using the two-step pre-signed URL flow. This requires client-side JavaScript to handle the file selection, call your upload-url API, then PUT the file directly to B2. In the React component, add a file input with onChange handler. When files are selected, iterate through them and for each: (1) call POST /api/files/upload-url with the filename, content type, and size — this returns a pre-signed URL and file key; (2) PUT the file directly to the returned URL using the browser's fetch API with the file as the body and Content-Type header set; (3) track upload progress using XMLHttpRequest (which supports progress events) rather than fetch for progress bar functionality. After all uploads complete, refresh the file list by calling GET /api/files. Update the table state with the new file list. For downloads, call GET /api/files/download-url?key={fileKey} to get a pre-signed download URL, then open it in a new tab or trigger a browser download. For a polished user experience, show individual file upload progress bars, allow multiple file uploads simultaneously (Promise.all for parallel uploads), and display file type icons based on MIME type or file extension.

1'use client';
2import { useState, useCallback } from 'react';
3
4export function FileUploader({ onUploadComplete }: { onUploadComplete: () => void }) {
5  const [uploading, setUploading] = useState<Record<string, number>>({});
6
7  const uploadFile = useCallback(async (file: File) => {
8    // Step 1: Get pre-signed upload URL
9    const urlRes = await fetch('/api/files/upload-url', {
10      method: 'POST',
11      headers: { 'Content-Type': 'application/json' },
12      body: JSON.stringify({
13        filename: file.name,
14        contentType: file.type || 'application/octet-stream',
15        fileSize: file.size,
16      }),
17    });
18    const { uploadUrl, key } = await urlRes.json();
19
20    // Step 2: Upload directly to B2 using XHR for progress tracking
21    await new Promise<void>((resolve, reject) => {
22      const xhr = new XMLHttpRequest();
23      xhr.upload.onprogress = (e) => {
24        if (e.lengthComputable) {
25          setUploading((prev) => ({
26            ...prev,
27            [file.name]: Math.round((e.loaded / e.total) * 100),
28          }));
29        }
30      };
31      xhr.onload = () => (xhr.status === 200 ? resolve() : reject(new Error('Upload failed')));
32      xhr.onerror = () => reject(new Error('Network error'));
33      xhr.open('PUT', uploadUrl);
34      xhr.setRequestHeader('Content-Type', file.type || 'application/octet-stream');
35      xhr.send(file);
36    });
37
38    setUploading((prev) => { const next = { ...prev }; delete next[file.name]; return next; });
39    onUploadComplete();
40  }, [onUploadComplete]);
41
42  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
43    const files = Array.from(e.target.files || []);
44    files.forEach(uploadFile);
45  };
46
47  return (
48    <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
49      <input type="file" multiple onChange={handleFileChange} className="hidden" id="file-input" />
50      <label htmlFor="file-input" className="cursor-pointer">
51        <div className="text-gray-500">Drop files here or click to browse</div>
52      </label>
53      {Object.entries(uploading).map(([name, progress]) => (
54        <div key={name} className="mt-3">
55          <div className="text-sm text-left mb-1">{name}</div>
56          <div className="w-full bg-gray-200 rounded-full h-2">
57            <div className="bg-blue-500 h-2 rounded-full transition-all" style={{ width: `${progress}%` }} />
58          </div>
59        </div>
60      ))}
61    </div>
62  );
63}