Bubble.io and Backblaze B2 integration: Step-by-Step Guide 2024

Step 1: Create an account on Bubble and Backblaze B2

Before anything else, make sure you have accounts on both Bubble.io and Backblaze B2. In case you don't have one, go to their respective websites and create one.

For Bubble: https://bubble.io/
For Backblaze B2: https://www.backblaze.com/b2/cloud-storage.html

Step 2: Create a new app on Bubble

First, log in to your Bubble account and create a new app. Click on the "New App" button, provide a name for the app, and select a template if you want to. Once you're satisfied, click on "Create New App."

Step 3: Set up Bucket on Backblaze B2

Now, switch over to Backblaze B2. Once logged in, you need to create a new bucket which will be used for storing your files via Bubble. Click on the "Buckets" link on the left menu, then click the "Create a Bucket" button. Give your bucket a unique name, select the type of access you want for this bucket, and click "Create a Bucket."

Step 4: Generate API Key

After the bucket is created, you will need an API key to enable interaction between Bubble and Backblaze B2. For this, click on the "App Keys" menu on the left, then click "Add a New Application Key". Give a name to the key and grant necessary permissions. Once done, click on "Create New Key". Important: make sure to save this key in a secure place as Backblaze will not show you this key again for security reasons.

Step 5: Configure API Connector on Bubble

Now, you need to set up Bubble to use this key to interact with Backblaze B2. Go back to Bubble and open your app, then navigate to Plugins. Click on "Add plugins", search for "API Connector", and add it to your app.

Once the API Connector is added, you need to configure it. Click on "API Connector" in the Plugins tab. Click "Add another API", name it something like "Backblaze B2."

We will create two calls: one for file upload and one for listing the files.

Step 6: Configure 'Get Upload URL' Call

In the API you created, click "Add another call". Name this call "Get Upload URL". Use the following configuration:

• Method: POST
• Use as: Action
• URL: https://api.backblazeb2.com/b2api/v1/b2_get_upload\_url
• Headers key: Authorization | Value: your API key from Backblaze
• Parameters key: bucketId | Value: your bucket ID from Backblaze

Click Initialize Call, if everything is configured correctly, you should get a message saying that the call is set up.

Step 7: Configure 'Upload File' Call

Add another API call, name it "Upload File". This call will be used to upload the files to Backblaze B2. Use the following configuration:

• Method: POST
• Use as: Action
• URL: Use Result from … 'Get Upload URL' uploadUrl
• Body:

{
"file_data": "Base64 encode file",
"file_name": "Name of the File"
}

• Headers key-value pairs should include:

• Authorization: Use Result from … 'Get Upload URL' authorizationToken

• X-Bz-File-Name: file_name

• Content-Type: content_type of the file

• X-Bz-Content-Sha1: do_not_verify

Here, 'Get Upload URL' should be your previous 'Get Upload URL' call. 'file_name' should be dynamically retrieved from the file to be uploaded. 'content_type' should be based on the file type to be uploaded.

Initialize the call, and it should be set as well.

Step 8: Set up Your Workflow

Now, depending on how you want to use it in your Bubble app, you will integrate workflow with elements. As an example, if you want to upload a file when a button is clicked, you will edit the workflow of that button:

• Add a new action to your button’s workflow
• Choose 'Plugins' and select 'Get Upload URL' from the Backblaze API
• Then as a second action in the workflow, choose 'Upload File' and set the dynamic values as per the requirement (filename and content type)

After these steps, your Bubble app should now be able to call Backblaze B2's APIs through the API Connector you set up, allowing you to upload files to the bucket you created.