Bubble.io and Dropbox integration: Step-by-Step Guide 2024

Step 1: Create a Dropbox App

Before you can integrate Dropbox with Bubble.io, you'll first need to create a Dropbox app. To do this, visit the Dropbox Developers website and login to your account.

Go to https://www.dropbox.com/developers/apps/create

Click on the Create app button. This action will take you to the application creation page. Pick Scoped access, which in other words means the app will only access data it has been explicitly granted permission to.

Next, select what data type your app will need to access. Select either Full dropbox or App folder, according to your needs. For instance, if your app will need to access and edit all files in your Dropbox, choose Full dropbox. If your app only needs to access files in a particular folder, select App folder.

Give your app a unique name in the field labelled Name your app.

Finally, click the Create app button to finish the process of creating your app.

Step 2: Generate and Copy Access Token

You now need to generate an access token, which your Bubble.io app will use to gain access to your Dropbox. To do this, return to your app's settings page on Dropbox.

Go to https://www.dropbox.com/developers/apps and click on your app's name

Scroll down and find the OAuth 2 section. Click on Generate in the Generated access token section. Your access token will then appear.

Keep this page open or copy the access token to somewhere safe. You'll need it later on when setting up Bubble.io.

Please ensure that you generate the token only when ready to use it because once you leave the page, the token won't be shown again.

Step 3: Adding Dropbox Plugin to Your Bubble.io App

Now that you have created a Dropbox app and acquired an access token, the next step is to integrate Dropbox with your Bubble.io app.

First, login to your Bubble.io account and navigate to your Bubble app's dashboard. From there, visit the Plugins tab on the left-side menu.

In the Plugins tab, click on + Add plugins. On the new page, search for Dropbox in the search bar and add it to your Bubble.io app.

Scroll down the same page and you'll see the Settings section of the Dropbox plugin. This is where you'll add the Dropbox access token.

Paste into the Access Token field the token you previously generated and then save your changes.

Step 4: Using Dropbox Actions in Your Bubble.io App

After adding the Dropbox plugin to your app and providing the appropriate access token, Dropbox will now be integrated with your app.

You can use Dropbox services in your Bubble.io app by going to your Bubble app editor, deciding where you want to add Dropbox functionality and then adding a new workflow to that element.

In the workflow editor, select Plugins in the drop-down menu and you can find various Dropbox actions offered by the Dropbox plugin, including but not limited to uploading a file, downloading a file and listing a folder's contents.

Choose an action and configure its settings according to your needs.

Step 5: Testing the Integration

Finally, you should test your work to make sure the Dropbox-Bubble.io integration actually works.

In your Bubble app's settings panel, navigate to General. Scroll down and click Check this app's permissions in the Privacy section.

If Dropbox is correctly integrated and given the right permissions, it should be indicated here.

One of the ways to test an action like uploading a file to Dropbox is by browsing to a page in your Bubble.io app that contains the element with that action, executing the action, and then checking in your Dropbox account to see whether the file was correctly uploaded.