How to Integrate Bolt.new with Backblaze B2 Cloud Storage

1# .env — add to project root in Bolt.new
2B2_ENDPOINT=https://s3.us-west-004.backblazeb2.com
3B2_REGION=us-west-004
4B2_KEY_ID=your_b2_key_id_here
5B2_APP_KEY=your_b2_application_key_here
6B2_BUCKET_NAME=your-bucket-name
7# Optional: If using Cloudflare CDN in front of B2
8CLOUDFLARE_CDN_URL=https://cdn.yourdomain.com

1// app/api/storage/upload-url/route.ts
2import { NextResponse } from 'next/server';
3import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
4import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
5import crypto from 'crypto';
6import path from 'path';
7
8const s3 = new S3Client({
9  endpoint: process.env.B2_ENDPOINT,
10  region: process.env.B2_REGION || 'us-west-004',
11  credentials: {
12    accessKeyId: process.env.B2_KEY_ID!,
13    secretAccessKey: process.env.B2_APP_KEY!,
14  },
15  // Required for Backblaze B2 S3-compatible API
16  forcePathStyle: true,
17});
18
19export async function POST(request: Request) {
20  const { B2_BUCKET_NAME, B2_ENDPOINT } = process.env;
21
22  if (!B2_BUCKET_NAME || !B2_ENDPOINT || !process.env.B2_KEY_ID || !process.env.B2_APP_KEY) {
23    return NextResponse.json(
24      { error: 'Backblaze B2 environment variables are not configured' },
25      { status: 500 }
26    );
27  }
28
29  try {
30    const body = await request.json();
31    const { filename, contentType, folder = 'uploads' } = body as {
32      filename: string;
33      contentType: string;
34      folder?: string;
35    };
36
37    if (!filename || !contentType) {
38      return NextResponse.json(
39        { error: 'filename and contentType are required' },
40        { status: 400 }
41      );
42    }
43
44    const ext = path.extname(filename);
45    const uniqueKey = `${folder}/${crypto.randomUUID()}${ext}`;
46
47    const command = new PutObjectCommand({
48      Bucket: B2_BUCKET_NAME,
49      Key: uniqueKey,
50      ContentType: contentType,
51    });
52
53    const uploadUrl = await getSignedUrl(s3, command, { expiresIn: 600 });
54
55    // Construct the public download URL
56    // B2 public URL format: ENDPOINT/BUCKET/KEY
57    const endpointHost = new URL(B2_ENDPOINT).host;
58    const publicUrl = `https://${endpointHost}/${B2_BUCKET_NAME}/${uniqueKey}`;
59
60    return NextResponse.json({ uploadUrl, publicUrl, key: uniqueKey });
61  } catch (error) {
62    const message = error instanceof Error ? error.message : 'Unknown error';
63    return NextResponse.json({ error: message }, { status: 500 });
64  }
65}

1// components/B2FileUpload.tsx
2'use client';
3
4import { useState, useRef } from 'react';
5
6interface Props {
7  accept?: string;
8  folder?: string;
9  onUploadComplete: (result: { publicUrl: string; key: string }) => void;
10  maxSizeMB?: number;
11}
12
13export function B2FileUpload({
14  accept = 'image/*',
15  folder = 'uploads',
16  onUploadComplete,
17  maxSizeMB = 10,
18}: Props) {
19  const [uploading, setUploading] = useState(false);
20  const [progress, setProgress] = useState(0);
21  const [error, setError] = useState<string | null>(null);
22  const [preview, setPreview] = useState<string | null>(null);
23  const inputRef = useRef<HTMLInputElement>(null);
24
25  async function handleFileChange(file: File) {
26    setError(null);
27    setProgress(0);
28
29    if (file.size > maxSizeMB * 1024 * 1024) {
30      setError(`File must be smaller than ${maxSizeMB}MB`);
31      return;
32    }
33
34    // Show local preview immediately for images
35    if (file.type.startsWith('image/')) {
36      setPreview(URL.createObjectURL(file));
37    }
38
39    setUploading(true);
40    try {
41      // Step 1: Get pre-signed upload URL from API route
42      const urlResponse = await fetch('/api/storage/upload-url', {
43        method: 'POST',
44        headers: { 'Content-Type': 'application/json' },
45        body: JSON.stringify({
46          filename: file.name,
47          contentType: file.type,
48          folder,
49        }),
50      });
51
52      if (!urlResponse.ok) {
53        const errData = await urlResponse.json();
54        throw new Error(errData.error || 'Failed to get upload URL');
55      }
56
57      const { uploadUrl, publicUrl, key } = await urlResponse.json();
58
59      // Step 2: Upload directly to Backblaze B2 using pre-signed URL
60      await new Promise<void>((resolve, reject) => {
61        const xhr = new XMLHttpRequest();
62        xhr.upload.onprogress = (e) => {
63          if (e.lengthComputable) {
64            setProgress(Math.round((e.loaded / e.total) * 100));
65          }
66        };
67        xhr.onload = () => {
68          if (xhr.status >= 200 && xhr.status < 300) resolve();
69          else reject(new Error(`B2 upload failed: ${xhr.status}`));
70        };
71        xhr.onerror = () => reject(new Error('Network error during upload'));
72        xhr.open('PUT', uploadUrl);
73        xhr.setRequestHeader('Content-Type', file.type);
74        xhr.send(file);
75      });
76
77      onUploadComplete({ publicUrl, key });
78    } catch (err) {
79      setError(err instanceof Error ? err.message : 'Upload failed');
80      setPreview(null);
81    } finally {
82      setUploading(false);
83    }
84  }
85
86  return (
87    <div className="space-y-4">
88      <div
89        className="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center cursor-pointer hover:border-blue-400 transition-colors"
90        onClick={() => inputRef.current?.click()}
91        onDragOver={(e) => e.preventDefault()}
92        onDrop={(e) => {
93          e.preventDefault();
94          const file = e.dataTransfer.files[0];
95          if (file) handleFileChange(file);
96        }}
97      >
98        {preview ? (
99          <img src={preview} alt="Preview" className="max-h-48 mx-auto rounded-lg object-contain" />
100        ) : (
101          <div className="text-gray-500">
102            <p className="text-lg font-medium">Drop a file here</p>
103            <p className="text-sm mt-1">or click to browse</p>
104          </div>
105        )}
106      </div>
107
108      <input
109        ref={inputRef}
110        type="file"
111        accept={accept}
112        className="hidden"
113        onChange={(e) => {
114          const file = e.target.files?.[0];
115          if (file) handleFileChange(file);
116        }}
117      />
118
119      {uploading && (
120        <div className="space-y-2">
121          <div className="w-full bg-gray-200 rounded-full h-2">
122            <div
123              className="bg-blue-500 h-2 rounded-full transition-all duration-300"
124              style={{ width: `${progress}%` }}
125            />
126          </div>
127          <p className="text-sm text-gray-600 text-center">{progress}% uploaded</p>
128        </div>
129      )}
130
131      {error && (
132        <p className="text-sm text-red-600 bg-red-50 rounded-lg p-3">{error}</p>
133      )}
134    </div>
135  );
136}

1// app/api/storage/setup-cors/route.ts
2// Run this ONCE to configure CORS on your B2 bucket.
3// After running, this route is no longer needed.
4import { NextResponse } from 'next/server';
5
6export async function POST() {
7  const keyId = process.env.B2_KEY_ID;
8  const appKey = process.env.B2_APP_KEY;
9  const bucketName = process.env.B2_BUCKET_NAME;
10
11  if (!keyId || !appKey || !bucketName) {
12    return NextResponse.json({ error: 'B2 credentials not configured' }, { status: 500 });
13  }
14
15  try {
16    // Step 1: Authorize with B2 native API
17    const authResponse = await fetch(
18      'https://api.backblazeb2.com/b2api/v3/b2_authorize_account',
19      {
20        headers: {
21          Authorization: `Basic ${Buffer.from(`${keyId}:${appKey}`).toString('base64')}`,
22        },
23      }
24    );
25
26    if (!authResponse.ok) {
27      const err = await authResponse.json();
28      return NextResponse.json({ error: `B2 auth failed: ${err.message}` }, { status: 401 });
29    }
30
31    const auth = await authResponse.json();
32    const { authorizationToken, apiInfo } = auth;
33    const apiUrl = apiInfo?.storageApi?.apiUrl || auth.apiUrl;
34
35    // Step 2: Get bucket ID
36    const bucketsResponse = await fetch(`${apiUrl}/b2api/v3/b2_list_buckets?bucketName=${bucketName}`, {
37      headers: { Authorization: authorizationToken },
38    });
39    const bucketsData = await bucketsResponse.json();
40    const bucket = bucketsData.buckets?.[0];
41
42    if (!bucket) {
43      return NextResponse.json({ error: `Bucket ${bucketName} not found` }, { status: 404 });
44    }
45
46    // Step 3: Update bucket with CORS rules
47    const corsResponse = await fetch(`${apiUrl}/b2api/v3/b2_update_bucket`, {
48      method: 'POST',
49      headers: {
50        Authorization: authorizationToken,
51        'Content-Type': 'application/json',
52      },
53      body: JSON.stringify({
54        accountId: auth.accountId,
55        bucketId: bucket.bucketId,
56        corsRules: [
57          {
58            corsRuleName: 'bolt-app-uploads',
59            allowedOrigins: ['*'],
60            allowedOperations: [
61              'b2_download_file_by_name',
62              'b2_upload_file',
63              's3_head',
64              's3_get',
65              's3_put',
66            ],
67            allowedHeaders: [
68              'Content-Type',
69              'x-amz-content-sha256',
70              'x-amz-date',
71              'authorization',
72              'x-amz-security-token',
73              'content-length',
74            ],
75            maxAgeSeconds: 3600,
76          },
77        ],
78      }),
79    });
80
81    const corsData = await corsResponse.json();
82    return NextResponse.json({ success: true, corsRules: corsData.corsRules });
83  } catch (error) {
84    const message = error instanceof Error ? error.message : 'Unknown error';
85    return NextResponse.json({ error: message }, { status: 500 });
86  }
87}

1// app/api/storage/files/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { S3Client, ListObjectsV2Command } from '@aws-sdk/client-s3';
4
5const s3 = new S3Client({
6  endpoint: process.env.B2_ENDPOINT,
7  region: process.env.B2_REGION || 'us-west-004',
8  credentials: {
9    accessKeyId: process.env.B2_KEY_ID!,
10    secretAccessKey: process.env.B2_APP_KEY!,
11  },
12  forcePathStyle: true,
13});
14
15export async function GET(request: NextRequest) {
16  const { searchParams } = new URL(request.url);
17  const prefix = searchParams.get('prefix') || '';
18  const maxKeys = parseInt(searchParams.get('maxKeys') || '50', 10);
19  const continuationToken = searchParams.get('continuationToken') || undefined;
20
21  const bucketName = process.env.B2_BUCKET_NAME;
22  const endpoint = process.env.B2_ENDPOINT;
23
24  if (!bucketName || !endpoint) {
25    return NextResponse.json({ error: 'B2 not configured' }, { status: 500 });
26  }
27
28  try {
29    const command = new ListObjectsV2Command({
30      Bucket: bucketName,
31      Prefix: prefix,
32      MaxKeys: maxKeys,
33      ContinuationToken: continuationToken,
34    });
35
36    const response = await s3.send(command);
37    const endpointHost = new URL(endpoint).host;
38
39    const files = (response.Contents || []).map((obj) => ({
40      key: obj.Key,
41      size: obj.Size,
42      lastModified: obj.LastModified,
43      publicUrl: `https://${endpointHost}/${bucketName}/${obj.Key}`,
44    }));
45
46    return NextResponse.json({
47      files,
48      nextContinuationToken: response.NextContinuationToken || null,
49      isTruncated: response.IsTruncated || false,
50    });
51  } catch (error) {
52    const message = error instanceof Error ? error.message : 'Unknown error';
53    return NextResponse.json({ error: message }, { status: 500 });
54  }
55}