How to Integrate Bolt.new with Wasabi

1# .env.local
2WASABI_ACCESS_KEY=your_access_key_here
3WASABI_SECRET_KEY=your_secret_key_here
4WASABI_BUCKET=your-bucket-name
5WASABI_REGION=us-east-1
6WASABI_ENDPOINT=https://s3.wasabisys.com

1// src/lib/wasabi.ts
2import { S3Client } from '@aws-sdk/client-s3';
3
4if (!process.env.WASABI_ACCESS_KEY || !process.env.WASABI_SECRET_KEY) {
5  throw new Error('Wasabi credentials are not configured in environment variables');
6}
7
8export const wasabiClient = new S3Client({
9  region: process.env.WASABI_REGION ?? 'us-east-1',
10  endpoint: process.env.WASABI_ENDPOINT ?? 'https://s3.wasabisys.com',
11  credentials: {
12    accessKeyId: process.env.WASABI_ACCESS_KEY,
13    secretAccessKey: process.env.WASABI_SECRET_KEY,
14  },
15  // Required for Wasabi S3-compatible API
16  forcePathStyle: true,
17});
18
19export function getWasabiConfig() {
20  return {
21    bucket: process.env.WASABI_BUCKET ?? '',
22  };
23}

1// app/api/wasabi/upload-url/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { PutObjectCommand } from '@aws-sdk/client-s3';
4import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
5import { wasabiClient, getWasabiConfig } from '@/lib/wasabi';
6
7export async function POST(request: NextRequest) {
8  const { filename, contentType, sizeBytes } = await request.json();
9
10  if (!filename || !contentType) {
11    return NextResponse.json({ error: 'filename and contentType are required' }, { status: 400 });
12  }
13
14  if (sizeBytes > 100 * 1024 * 1024) {
15    return NextResponse.json({ error: 'File size exceeds 100MB limit' }, { status: 400 });
16  }
17
18  const { bucket } = getWasabiConfig();
19  const key = `uploads/${crypto.randomUUID()}/${filename}`;
20
21  const command = new PutObjectCommand({
22    Bucket: bucket,
23    Key: key,
24    ContentType: contentType,
25    ContentLength: sizeBytes,
26  });
27
28  const uploadUrl = await getSignedUrl(wasabiClient, command, { expiresIn: 900 }); // 15 minutes
29  const endpoint = process.env.WASABI_ENDPOINT ?? 'https://s3.wasabisys.com';
30  const publicUrl = `${endpoint}/${bucket}/${key}`;
31
32  return NextResponse.json({ uploadUrl, key, publicUrl });
33}
34
35// app/api/wasabi/download-url/route.ts
36import { NextRequest, NextResponse } from 'next/server';
37import { GetObjectCommand } from '@aws-sdk/client-s3';
38import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
39import { wasabiClient, getWasabiConfig } from '@/lib/wasabi';
40
41export async function GET(request: NextRequest) {
42  const key = request.nextUrl.searchParams.get('key');
43  if (!key) return NextResponse.json({ error: 'key is required' }, { status: 400 });
44
45  const { bucket } = getWasabiConfig();
46  const command = new GetObjectCommand({ Bucket: bucket, Key: key });
47  const downloadUrl = await getSignedUrl(wasabiClient, command, { expiresIn: 3600 }); // 1 hour
48
49  return NextResponse.json({ downloadUrl });
50}

1// Wasabi bucket CORS configuration (paste into Wasabi console → Bucket Properties → CORS)
2[
3  {
4    "AllowedOrigins": [
5      "https://*.webcontainer-api.io",
6      "https://*.stackblitz.io",
7      "https://your-app.netlify.app",
8      "http://localhost:3000"
9    ],
10    "AllowedMethods": ["GET", "PUT", "POST", "DELETE", "HEAD"],
11    "AllowedHeaders": ["*"],
12    "ExposeHeaders": ["ETag"],
13    "MaxAgeSeconds": 3600
14  }
15]

1// src/components/FileUploader.tsx
2'use client';
3import { useState, useRef } from 'react';
4
5interface UploadResult {
6  key: string;
7  publicUrl: string;
8}
9
10export function FileUploader() {
11  const [progress, setProgress] = useState(0);
12  const [uploading, setUploading] = useState(false);
13  const [result, setResult] = useState<UploadResult | null>(null);
14  const [error, setError] = useState<string | null>(null);
15  const inputRef = useRef<HTMLInputElement>(null);
16
17  const uploadFile = async (file: File) => {
18    setUploading(true);
19    setProgress(0);
20    setError(null);
21    setResult(null);
22
23    try {
24      // Step 1: Get pre-signed upload URL
25      const urlRes = await fetch('/api/wasabi/upload-url', {
26        method: 'POST',
27        headers: { 'Content-Type': 'application/json' },
28        body: JSON.stringify({
29          filename: file.name,
30          contentType: file.type || 'application/octet-stream',
31          sizeBytes: file.size,
32        }),
33      });
34      const { uploadUrl, key } = await urlRes.json();
35
36      // Step 2: Upload directly to Wasabi using XHR for progress tracking
37      await new Promise<void>((resolve, reject) => {
38        const xhr = new XMLHttpRequest();
39        xhr.upload.addEventListener('progress', (e) => {
40          if (e.lengthComputable) setProgress(Math.round((e.loaded / e.total) * 100));
41        });
42        xhr.addEventListener('load', () => (xhr.status < 300 ? resolve() : reject(new Error(`Upload failed: ${xhr.status}`))));
43        xhr.addEventListener('error', () => reject(new Error('Network error during upload')));
44        xhr.open('PUT', uploadUrl);
45        xhr.setRequestHeader('Content-Type', file.type || 'application/octet-stream');
46        xhr.send(file);
47      });
48
49      setResult({ key, publicUrl: `/api/wasabi/download-url?key=${encodeURIComponent(key)}` });
50    } catch (err) {
51      setError(err instanceof Error ? err.message : 'Upload failed');
52    } finally {
53      setUploading(false);
54    }
55  };
56
57  return (
58    <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
59      <input ref={inputRef} type="file" className="hidden" onChange={(e) => e.target.files?.[0] && uploadFile(e.target.files[0])} />
60      {!uploading && !result && (
61        <button onClick={() => inputRef.current?.click()} className="bg-orange-500 text-white px-6 py-3 rounded-lg hover:bg-orange-600">
62          Choose File to Upload
63        </button>
64      )}
65      {uploading && (
66        <div>
67          <div className="w-full bg-gray-200 rounded-full h-3 mb-2">
68            <div className="bg-orange-500 h-3 rounded-full transition-all" style={{ width: `${progress}%` }} />
69          </div>
70          <p className="text-sm text-gray-600">Uploading... {progress}%</p>
71        </div>
72      )}
73      {result && (
74        <div>
75          <p className="text-green-600 font-semibold mb-3">Upload complete!</p>
76          <a href={result.publicUrl} className="text-blue-600 underline text-sm" target="_blank" rel="noreferrer">
77            Download file
78          </a>
79        </div>
80      )}
81      {error && <p className="text-red-600 text-sm">{error}</p>}
82    </div>
83  );
84}