Dropbox

Go to dropbox.com/developers/apps and click 'Create app'. Choose 'Scoped access' as the API type and 'Full Dropbox' as the access type (or 'App folder' if you want to restrict the integration to a single Dropbox folder — App folder is simpler and safer for production apps where you control the Dropbox account). Give your app a name like 'Bubble Integration'. After creating the app, go to the Permissions tab. Enable these permission scopes: - `files.content.read` — list folder contents and download files - `files.content.write` — upload and move files - `sharing.write` — create shared links Click Submit on the Permissions page, then go to the Settings tab. Scroll down to the 'OAuth 2' section and click 'Generate' under 'Generated access token'. Copy the token — this is your long-lived Bearer token. Important: tokens generated in the Developer Console are tied to your personal Dropbox account. For multi-user apps where each user connects their own Dropbox, you need a full OAuth 2.0 flow. For single-account apps (the typical founder use case — 'my Bubble app accesses my Dropbox'), this long-lived token is sufficient and does not expire by default unless you revoke it. Store this token somewhere safe locally before you paste it into Bubble. You will add it to two separate API Connector entries in the next steps.

In your Bubble app, go to the Plugins tab → Add plugins → search 'API Connector' and install the plugin by Bubble if not already installed. Click 'API Connector' in the left panel. Click 'Add another API'. Name it exactly 'Dropbox RPC'. In the Shared headers section, add: - Header name: `Authorization` - Value: `Bearer YOUR_ACCESS_TOKEN_HERE` (replace with your actual token) - Check the **Private** checkbox — this is critical. The Private checkbox tells Bubble to inject this header server-side and never expose it in browser network requests. Set the base URL for this API group to: `https://api.dropboxapi.com/2` Now add your first call. Click 'Add another call' and configure the list_folder call: - Name: `List Folder` - Method: POST - URL: `/files/list_folder` - Body type: JSON - Body fields: `path` (text, value `""`) The call configuration looks like: ```json { "method": "POST", "url": "https://api.dropboxapi.com/2/files/list_folder", "headers": { "Authorization": "Bearer <private>", "Content-Type": "application/json" }, "body": { "path": "" } } ``` Scroll to 'Use as' and select **Data** (this call returns a list of files to display). Click **Initialize call**. In the path field, enter an empty string `""` — this lists the root of the Dropbox. Click Run. Dropbox will return a JSON object with an `entries` array. Bubble will detect the fields. Click Save. Critical: the `path` value for the root folder is literally an empty string — not `"/"`, not `"root"`, not `"."`. Passing any other value for root returns a 409 path/not_found error.

1{
2  "method": "POST",
3  "url": "https://api.dropboxapi.com/2/files/list_folder",
4  "headers": {
5    "Authorization": "Bearer <private>",
6    "Content-Type": "application/json"
7  },
8  "body": {
9    "path": ""
10  }
11}

In the 'Dropbox RPC' API Connector group, add two more calls that you will commonly need. **Call 2: Create Shared Link** - Name: `Create Shared Link` - Method: POST - URL: `/sharing/create_shared_link_with_settings` - Body type: JSON - Body fields: `path` (text, dynamic — will be the file path) Call configuration: ```json { "method": "POST", "url": "https://api.dropboxapi.com/2/sharing/create_shared_link_with_settings", "headers": { "Authorization": "Bearer <private>", "Content-Type": "application/json" }, "body": { "path": "<dynamic>" } } ``` Set 'Use as' to **Action** (triggered by user clicking 'Share'). For Initialize call, enter a real file path from your Dropbox (e.g., `/test.txt`) and run. The response includes a `url` field — this is the shareable link. **Critical gotcha**: If a shared link already exists for that file, Dropbox returns a 409 error with error code `shared_link_already_exists` and the existing URL in the error body. To handle this gracefully in Bubble, add a conditional in the workflow: if the API Connector action returns a 409 error, call `/sharing/list_shared_links` (another POST call) with the same path to retrieve the existing URL. Alternatively, always call list_shared_links first and only call create if no link exists. **Call 3: Move File** - Name: `Move File` - Method: POST - URL: `/files/move_v2` - Body type: JSON - Body fields: `from_path` (text, dynamic), `to_path` (text, dynamic) Initialize call with real test paths from your Dropbox. Set 'Use as' to Action. This call is used in Backend Workflows for automated organization (e.g., archiving completed projects).

1{
2  "method": "POST",
3  "url": "https://api.dropboxapi.com/2/sharing/create_shared_link_with_settings",
4  "headers": {
5    "Authorization": "Bearer <private>",
6    "Content-Type": "application/json"
7  },
8  "body": {
9    "path": "<dynamic>"
10  }
11}

File uploads in Dropbox go to a completely different hostname: content.dropboxapi.com. You cannot add the upload endpoint to the 'Dropbox RPC' group — Bubble API Connector groups are tied to a single base URL. You must create a second, separate API Connector group. Click 'Add another API' again. Name it 'Dropbox Content'. Add the same Authorization shared header: - Header name: `Authorization` - Value: `Bearer YOUR_ACCESS_TOKEN_HERE` - Check the **Private** checkbox Set the base URL to: `https://content.dropboxapi.com/2` Add a call named 'Upload File': - Method: POST - URL: `/files/upload` - Body type: **Binary** (not JSON — file upload sends raw bytes) - Add a CUSTOM header (not a body field): `Dropbox-API-Arg` The `Dropbox-API-Arg` header is unique to Dropbox's content API. Instead of JSON in the request body, upload parameters go in this header as a JSON string. Here is what the full call configuration looks like: ```json { "method": "POST", "url": "https://content.dropboxapi.com/2/files/upload", "headers": { "Authorization": "Bearer <private>", "Content-Type": "application/octet-stream", "Dropbox-API-Arg": "{\"path\": \"/uploads/<dynamic-filename>\", \"mode\": \"add\", \"autorename\": true}" } } ``` In practice, you will build the Dropbox-API-Arg value dynamically in a Bubble workflow expression, constructing the JSON string with the correct path. Set 'Use as' to Action. For Initialize call: Bubble needs a real binary response to detect response fields. Run the initialization with a small test file. The response includes `path_lower`, `id`, `name`, and `size` — save these to your Bubble database when an upload succeeds. Note: this upload method works well for files up to approximately 150 MB. For larger files, Dropbox requires a chunked upload session (upload_session/start, upload_session/append, upload_session/finish) — an advanced pattern requiring multiple sequential Backend Workflow steps.

1{
2  "method": "POST",
3  "url": "https://content.dropboxapi.com/2/files/upload",
4  "headers": {
5    "Authorization": "Bearer <private>",
6    "Content-Type": "application/octet-stream",
7    "Dropbox-API-Arg": "{\"path\": \"/uploads/<dynamic-filename>\", \"mode\": \"add\", \"autorename\": true}"
8  }
9}

Now connect your API Connector calls to Bubble UI elements. **File browser repeating group:** 1. Add a Repeating Group element to your page 2. Set Type of content to 'Dropbox RPC - List Folder' (the API call type Bubble detected) 3. Set Data source to 'Get data from external API' → select 'Dropbox RPC - List Folder' → set path to `""` (empty string for root) 4. Inside the repeating group, add a Text element bound to 'Current cell's entry's name' 5. Add a second Text element for 'Current cell's entry's size' (the file size in bytes) 6. Add a Button element labeled 'Get Share Link' **Share button workflow:** 1. Click the Share Link button → Add workflow 2. Action: Plugins → Dropbox RPC → Create Shared Link 3. Set path to: Current cell's entry's path_lower (the file path returned by list_folder) 4. After the action, set an App State variable 'shared_url' to: Result of Step 1's url field 5. Add a next action: 'Copy to clipboard' → value: App State's shared_url **Upload button workflow:** Add an Upload element and a 'Upload to Dropbox' button: 1. File Uploader element (Bubble's built-in) on the page 2. Button click workflow → Plugins → Dropbox Content → Upload File 3. Set the file body to: FileUploader A's value (the uploaded file) 4. Set the Dropbox-API-Arg dynamically: `{"path": "/uploads/` + FileUploader A's value's name + `", "mode": "add", "autorename": true}` 5. After upload succeeds, create a DropboxFile Thing in Bubble's database with path_lower and name from the result Finally, go to Data tab → Data types → DropboxFile → Privacy. Add a rule: only the file's creator can read and search records. Without privacy rules, all logged-in users can read each other's DropboxFile records.

Run your Bubble app in preview mode (HTTPS by default, which satisfies Dropbox's API requirements). **Test list_folder**: The repeating group should populate with your Dropbox root's contents within 1-2 seconds. If it stays empty, check the Bubble Logs tab → API Connector logs for the raw Dropbox response. **Test Create Shared Link**: Click the Share button on a file. The shared link URL should appear in the App State. If you get a 409 error, this means the file already has a shared link — this is expected behavior. Update your workflow to handle the 409 by calling list_shared_links for that path. **Test file upload**: Select a small test file (under 1 MB) and click Upload. Check the Bubble Logs tab to confirm the Content API call succeeded. Then open your Dropbox account's web UI — the file should appear in the `/uploads/` folder. **Verify WU consumption**: Bubble charges Workload Units for each API call. In your app's dashboard, check Settings → Workload → Recent logs after running a few operations. List Folder calls against large Dropbox accounts return substantial JSON payloads, which cost more WUs to process. If WU costs are a concern, add `limit` to the list_folder call body to reduce response size, and consider caching folder listings in Bubble's database. **Reminder about paid plan requirement**: Backend Workflows that run automated file operations (scheduled moves, archive triggers) require a Bubble paid plan. Client-side API Connector calls (like list_folder bound to a repeating group) work on the free plan but expose a limitation: any user with DevTools open can see the API response. For production apps, run Dropbox operations through Backend Workflows. RapidDev's team has built Bubble apps with file management integrations like this — if you need help with multi-user OAuth flows or complex folder automation, book a free scoping call at rapidevelopers.com/contact.