How to Integrate Bolt.new with AWS S3

1[
2  {
3    "AllowedHeaders": ["*"],
4    "AllowedMethods": ["GET", "PUT", "POST", "DELETE", "HEAD"],
5    "AllowedOrigins": ["*"],
6    "ExposeHeaders": ["ETag"],
7    "MaxAgeSeconds": 3000
8  }
9]

1# .env file — never commit this to git
2AWS_ACCESS_KEY_ID=your_access_key_here
3AWS_SECRET_ACCESS_KEY=your_secret_key_here
4AWS_REGION=us-east-1
5AWS_S3_BUCKET_NAME=your-bucket-name

1import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
2import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
3import { NextResponse } from 'next/server';
4
5const s3Client = new S3Client({
6  region: process.env.AWS_REGION!,
7  credentials: {
8    accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
9    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
10  },
11});
12
13export async function POST(request: Request) {
14  try {
15    const { fileName, fileType } = await request.json();
16
17    if (!fileName || !fileType) {
18      return NextResponse.json(
19        { error: 'fileName and fileType are required' },
20        { status: 400 }
21      );
22    }
23
24    // Create a unique key to avoid filename collisions
25    const key = `uploads/${Date.now()}-${fileName.replace(/[^a-zA-Z0-9.-]/g, '_')}`;
26
27    const command = new PutObjectCommand({
28      Bucket: process.env.AWS_S3_BUCKET_NAME!,
29      Key: key,
30      ContentType: fileType,
31    });
32
33    const signedUrl = await getSignedUrl(s3Client, command, {
34      expiresIn: 900, // 15 minutes
35    });
36
37    const objectUrl = `https://${process.env.AWS_S3_BUCKET_NAME}.s3.${process.env.AWS_REGION}.amazonaws.com/${key}`;
38
39    return NextResponse.json({ signedUrl, objectUrl, key });
40  } catch (error) {
41    console.error('Error generating signed URL:', error);
42    return NextResponse.json(
43      { error: 'Failed to generate upload URL' },
44      { status: 500 }
45    );
46  }
47}

1import { useState, useRef } from 'react';
2
3interface FileUploadProps {
4  accept?: string;
5  maxSizeMB?: number;
6  onUploadComplete?: (url: string) => void;
7}
8
9export function FileUpload({
10  accept = '*/*',
11  maxSizeMB = 10,
12  onUploadComplete,
13}: FileUploadProps) {
14  const [uploading, setUploading] = useState(false);
15  const [progress, setProgress] = useState(0);
16  const [uploadedUrl, setUploadedUrl] = useState<string | null>(null);
17  const [error, setError] = useState<string | null>(null);
18  const fileInputRef = useRef<HTMLInputElement>(null);
19
20  const uploadFile = async (file: File) => {
21    if (file.size > maxSizeMB * 1024 * 1024) {
22      setError(`File must be smaller than ${maxSizeMB}MB`);
23      return;
24    }
25
26    setUploading(true);
27    setProgress(0);
28    setError(null);
29
30    try {
31      // Step 1: Get pre-signed URL from our API
32      const urlResponse = await fetch('/api/upload-url', {
33        method: 'POST',
34        headers: { 'Content-Type': 'application/json' },
35        body: JSON.stringify({ fileName: file.name, fileType: file.type }),
36      });
37
38      if (!urlResponse.ok) throw new Error('Failed to get upload URL');
39      const { signedUrl, objectUrl } = await urlResponse.json();
40
41      // Step 2: Upload directly to S3 with progress tracking
42      await new Promise<void>((resolve, reject) => {
43        const xhr = new XMLHttpRequest();
44        xhr.upload.onprogress = (e) => {
45          if (e.lengthComputable) {
46            setProgress(Math.round((e.loaded / e.total) * 100));
47          }
48        };
49        xhr.onload = () => {
50          if (xhr.status === 200) resolve();
51          else reject(new Error(`Upload failed: ${xhr.status}`));
52        };
53        xhr.onerror = () => reject(new Error('Upload failed'));
54        xhr.open('PUT', signedUrl);
55        xhr.setRequestHeader('Content-Type', file.type);
56        xhr.send(file);
57      });
58
59      setUploadedUrl(objectUrl);
60      onUploadComplete?.(objectUrl);
61    } catch (err) {
62      setError(err instanceof Error ? err.message : 'Upload failed');
63    } finally {
64      setUploading(false);
65    }
66  };
67
68  return (
69    <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
70      <input
71        ref={fileInputRef}
72        type="file"
73        accept={accept}
74        className="hidden"
75        onChange={(e) => e.target.files?.[0] && uploadFile(e.target.files[0])}
76      />
77      {!uploading && !uploadedUrl && (
78        <button
79          onClick={() => fileInputRef.current?.click()}
80          className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
81        >
82          Choose File (max {maxSizeMB}MB)
83        </button>
84      )}
85      {uploading && (
86        <div>
87          <div className="bg-gray-200 rounded-full h-2 mt-2">
88            <div
89              className="bg-blue-600 h-2 rounded-full transition-all"
90              style={{ width: `${progress}%` }}
91            />
92          </div>
93          <p className="mt-1 text-sm text-gray-500">{progress}% uploaded</p>
94        </div>
95      )}
96      {uploadedUrl && (
97        <p className="text-green-600 text-sm">Upload complete!</p>
98      )}
99      {error && <p className="text-red-600 text-sm mt-2">{error}</p>}
100    </div>
101  );
102}