Backblaze B2

Log in to the Backblaze console at secure.backblaze.com. Navigate to B2 Cloud Storage → Buckets → Create a Bucket. Give it a unique name and choose Private (recommended — public buckets allow unauthenticated downloads of any file). After the bucket is created, click on its name to open bucket details. You will see a field labeled 'Endpoint' — this is your S3-compatible endpoint URL. It looks like `s3.us-west-004.backblazeb2.com` and includes a region number (004, 002, etc.). Copy this exact URL — you will need it in your presign proxy. Do not guess or construct this URL manually; the region number format is specific to each bucket and mismatches cause persistent `SignatureDoesNotMatch` errors that look like credential problems but are actually endpoint problems. Also decide on your CORS policy now. For browser-based uploads, Backblaze requires CORS to be configured on the bucket. In the bucket details page, click 'CORS Rules'. Add a rule with: AllowedOrigins set to your Bubble app domain (e.g., `https://myapp.bubbleapps.io`), AllowedOperations including `b2_upload` and `b2_download_file`, and set AllowedHeaders to `*`. Save the CORS rule before attempting any browser-side uploads.

1{
2  "bucket_name": "my-bubble-app-uploads",
3  "bucket_type": "allPrivate",
4  "s3_compatible_endpoint": "s3.us-west-004.backblazeb2.com",
5  "cors_rule": {
6    "corsRuleName": "allowBubbleUploads",
7    "allowedOrigins": ["https://yourapp.bubbleapps.io"],
8    "allowedHeaders": ["*"],
9    "allowedOperations": ["b2_upload", "b2_download_file"],
10    "maxAgeSeconds": 3600
11  }
12}

In the Backblaze console, go to Account → App Keys → Add a New Application Key. Give the key a descriptive name (e.g., 'bubble-app-presign'). Under 'Allow access to Bucket', select the specific bucket you just created rather than 'All Buckets' — this follows the principle of least privilege and limits the blast radius if the key is ever compromised. Enable read and write permissions. Click 'Create New Key'. Backblaze will display your `keyID` and `applicationKey` exactly once. Copy both values immediately — the `applicationKey` (equivalent to AWS Secret Access Key) is never shown again and cannot be recovered. If you lose it, you must create a new key. In the context of the AWS SDK: your `keyID` maps to `accessKeyId` and your `applicationKey` maps to `secretAccessKey`. These two values will live only in your presign proxy function's environment variables — they should never appear in Bubble's API Connector configuration or any client-facing code.

1# Environment variables for your presign proxy
2B2_KEY_ID=your_keyID_here
3B2_APPLICATION_KEY=your_applicationKey_here
4B2_BUCKET_NAME=my-bubble-app-uploads
5B2_ENDPOINT=https://s3.us-west-004.backblazeb2.com
6B2_REGION=us-west-004

Your presign proxy is a small server-side function that uses the AWS SDK pointed at Backblaze B2 instead of Amazon S3. The single most important configuration difference: you MUST set `s3ForcePathStyle: true` (or `forcePathStyle: true` in AWS SDK v3) when creating the S3 client. Without this, the AWS SDK constructs the request URL as `bucket.s3.endpoint.com/key` (virtual-hosted style), which Backblaze B2 does not recognize. With path style, the URL becomes `s3.endpoint.com/bucket/key`, which B2 supports. Deploy this as a Cloudflare Worker, Supabase Edge Function, or AWS Lambda. The function should accept a POST request with a `filename` and `contentType` in the body, and return a presigned PUT URL that is valid for a short time window (15–60 minutes is typical). Set your B2 credentials as environment variables in the hosting platform's dashboard — never hardcode them in the function source. Once deployed, note the function's public URL (e.g., `https://my-worker.myname.workers.dev/presign`). This URL — not the B2 endpoint — is what you will configure in Bubble's API Connector.

1// Cloudflare Worker — presign proxy for Backblaze B2
2import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
3import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
4
5export default {
6  async fetch(request, env) {
7    if (request.method !== 'POST') {
8      return new Response('Method not allowed', { status: 405 });
9    }
10
11    const { filename, contentType } = await request.json();
12
13    const s3 = new S3Client({
14      region: env.B2_REGION,          // e.g., 'us-west-004'
15      endpoint: env.B2_ENDPOINT,      // e.g., 'https://s3.us-west-004.backblazeb2.com'
16      forcePathStyle: true,           // REQUIRED for Backblaze B2
17      credentials: {
18        accessKeyId: env.B2_KEY_ID,
19        secretAccessKey: env.B2_APPLICATION_KEY,
20      },
21    });
22
23    const key = `uploads/${Date.now()}-${filename}`;
24
25    const command = new PutObjectCommand({
26      Bucket: env.B2_BUCKET_NAME,
27      Key: key,
28      ContentType: contentType,
29    });
30
31    const presignedUrl = await getSignedUrl(s3, command, { expiresIn: 900 });
32
33    return new Response(
34      JSON.stringify({ presignedUrl, objectKey: key }),
35      { headers: { 'Content-Type': 'application/json' } }
36    );
37  },
38};

In your Bubble app editor, go to the Plugins tab in the left sidebar. Click 'Add plugins', search for 'API Connector' (the official plugin by Bubble), and install it. Once installed, click on API Connector to open its configuration panel. Click 'Add another API'. Name it 'B2 Presign Proxy'. In the Authentication field, you can leave it as 'None' if your proxy is publicly accessible (relying on the obscurity of the URL) or add a custom header if your proxy requires an auth token. If you add an auth header (e.g., `X-Proxy-Key`), check the 'Private' checkbox next to it — this ensures the header value is never sent to the browser. Click 'Add a new call' inside the B2 Presign Proxy API. Configure it as follows: - Name: Get Presigned Upload URL - Method: POST - URL: your proxy URL (e.g., `https://my-worker.workers.dev/presign`) - Body Type: JSON - Body parameters: `filename` (type: text, dynamic value: `<filename>`) and `contentType` (type: text, dynamic value: `<contentType>`) Click 'Initialize call'. Bubble will make an actual request to your proxy — provide real values: filename = `test.jpg`, contentType = `image/jpeg`. Bubble will parse the JSON response and detect the `presignedUrl` and `objectKey` fields automatically. These become bindable values you can use in workflows.

1{
2  "api_name": "B2 Presign Proxy",
3  "call_name": "Get Presigned Upload URL",
4  "method": "POST",
5  "url": "https://my-worker.myname.workers.dev/presign",
6  "headers": {
7    "Content-Type": "application/json"
8  },
9  "body": {
10    "filename": "<dynamic: filename from workflow>",
11    "contentType": "<dynamic: file mime type>"
12  },
13  "response_fields_auto_detected": [
14    "presignedUrl",
15    "objectKey"
16  ]
17}

Now wire everything together in Bubble's workflow editor. You will need a two-part flow: a Backend Workflow that fetches the presigned URL from your proxy (this runs server-side), and a client-side action that executes the actual browser-to-B2 upload using the presigned URL. First, create the upload trigger. Add a Button element to your page labeled 'Upload File'. In its workflow, add a step: Plugins → API Connector → GET PRESIGNED UPLOAD URL. Set the `filename` to the file element's filename and `contentType` to the file element's MIME type. This call returns `presignedUrl` and `objectKey` from your proxy. Next, add a second workflow step: 'Run JavaScript'. Use the Toolbox plugin (free, by Bubble) if it isn't installed — it provides the 'Run JavaScript' action. Write JavaScript that reads the file from a Bubble file uploader element and PUTs it to the presigned URL. Pass the presigned URL as an input parameter from the previous step's result. Finally, on JavaScript completion success, add a 'Make changes to a Thing' step that saves the `objectKey` to the relevant database record. Store ONLY the object key (e.g., `uploads/1710000000-document.pdf`), not the full presigned URL. Presigned URLs expire; object keys do not. When you need to display the file, call your proxy again to get a fresh presigned GET URL.

1// Bubble 'Run JavaScript' action — upload file to B2 presigned URL
2// Input parameters: presignedUrl (text), objectKey (text)
3// Access via: bubble_fn_param1, or pass as named inputs in Toolbox
4
5(async function() {
6  const presignedUrl = properties.presignedUrl; // from API Connector result
7  const fileElement = document.querySelector('#fileUploader input[type="file"]');
8  const file = fileElement.files[0];
9
10  if (!file) {
11    bubble_fn_result(false);
12    return;
13  }
14
15  try {
16    const response = await fetch(presignedUrl, {
17      method: 'PUT',
18      body: file,
19      headers: {
20        'Content-Type': file.type,
21      },
22    });
23
24    if (response.ok) {
25      bubble_fn_result(true); // triggers 'result is returned' event
26    } else {
27      console.error('Upload failed:', response.status, await response.text());
28      bubble_fn_result(false);
29    }
30  } catch (err) {
31    console.error('Upload error:', err);
32    bubble_fn_result(false);
33  }
34})();

Since you stored only the object key in your Bubble database (not a full URL), you need to generate a presigned GET URL whenever you want to display or link to a file. Add a second call to your B2 Presign Proxy API Connector for this. In the API Connector, inside the 'B2 Presign Proxy' API, click 'Add a new call'. Name it 'Get Presigned Download URL'. Configure it as a POST to your proxy at `/presign-get` (you will need to add this route to your proxy function as well). Send the `objectKey` in the request body. The proxy returns a presigned GET URL valid for a time window you control (e.g., 3600 seconds). In your Bubble pages, wherever you display uploaded files — Image elements, link elements, repeating groups — use a dynamic expression that calls this API call with the stored object key and binds the result's `presignedGetUrl` to the element's URL or link destination. For images you want to display in a repeating group, consider using a 'Get data from external API' source with the object key as the parameter. For files in a public bucket (less common, only if security isn't a concern), the direct download URL is simpler: `https://f{clusterNumber}.backblazeb2.com/file/{bucketName}/{objectKey}` — find the clusterNumber in your bucket details. No presigning needed for public objects. RapidDev's team has built dozens of Bubble file management workflows — if you need help designing the retrieval pattern for your specific use case, reach out at rapidevelopers.com/contact.

1// Add to your Cloudflare Worker — GET presigned URL route
2if (request.url.includes('/presign-get')) {
3  const { objectKey } = await request.json();
4
5  const s3 = new S3Client({
6    region: env.B2_REGION,
7    endpoint: env.B2_ENDPOINT,
8    forcePathStyle: true,
9    credentials: {
10      accessKeyId: env.B2_KEY_ID,
11      secretAccessKey: env.B2_APPLICATION_KEY,
12    },
13  });
14
15  const command = new GetObjectCommand({
16    Bucket: env.B2_BUCKET_NAME,
17    Key: objectKey,
18  });
19
20  const presignedGetUrl = await getSignedUrl(s3, command, { expiresIn: 3600 });
21
22  return new Response(
23    JSON.stringify({ presignedGetUrl }),
24    { headers: { 'Content-Type': 'application/json' } }
25  );
26}