Screenshot from 2023-12-08 09-29-33.png

Upload Files to Dropbox in Your App


How to configure an Authenticated API datasource for Dropbox with OAuth 2.0 and create a query that uploads a file to Dropbox from your Appsmith app.



This tutorial is designed to help you seamlessly integrate Dropbox file upload functionality into your Appsmith app. We'll start by guiding you through creating a Dropbox app, configuring the Authenticated API, and setting up the necessary queries and widgets in Appsmith. By the end of this tutorial, you'll be equipped with the knowledge to effectively upload files to Dropbox from your Appsmith app, enhancing your application's functionality and user experience.

  1. Create a Dropbox app

    You will need a Dropbox app in order to oauth in and connect to Appsmith. If you haven't already created an app with Dropbox, follow the steps below:

    1. Navigate to the App Console and click the Create App button.
    2. Configure your app's API, Type of access, and Name on the next page to meet your needs.
    3. Click Create app to finish setup and be taken to your new app's configuration screen.
  2. Configure the Authenticated API

    The following steps walk you through configuring a datasource that can query Dropbox with OAuth 2.0. In your Appsmith app, create an Authenticated API datasource and update its name.

    In the datasource configuration screen, set up the fields as follows:

    • URL: 
    • Authentication Type: OAuth 2.0
    • Grant Type: Authorization Code
    • Access Token URL:
    • Client ID:
      • In the Dropbox App Console, Select your app > Settings > App key.
    • Client Secret:
      • In the Dropbox App Console: Settings > App secret.
    • Scopes:
      • Configure in the Dropbox App Console: Select your app > Permissions.
      • Tick the files.content.write checkbox.
      • Enter files.content.write into Appsmith's Scope(s) field.
    • Authorization URL:
    • Redirect URL:
      • In Appsmith, click the Copy button next to this field.
      • In the Dropbox App Console: Select your app > Settings > OAuth2 > Redirect URIs.
      • Paste the URL copied from Appsmith into the Redirect URIs field in Dropbox, and then click Add.

    When you're finished, click the Save and Authorize button. You’ll be redirected to a confirmation page with Dropbox to allow access to Appsmith. If your authentication is set up correctly, an alert lets you know that "Authorization was successful."

  3. Configure the upload query

    These steps show how to set up a query that can upload a file to Dropbox. You'll set up the necessary widgets in the next section.

    1. Once your Authenticated API datasource is configured, create a query based on it.
    2. Set the request method to POST.
    3. The base URL ( should already be inherited from the datasource. Append 2/files/upload to the URL.
    4. Create a Header key/value pair:
      • Key:Content-Type
      • Value: application/octet-stream
    5. Create a Header key/value pair:
      • Key:Dropbox-API-Arg
      • Value: {"path": "/{{FilePicker1.files[0].name}}","mode": "add", "autorename" : true, "mute" : false, "strict_conflict": false}
    6. In the Body tab of the query, select the RAW type and write the following code:
      1. {{FilePicker1.files[0].data}}

    Note: We are assuming here that when you add your File picker widget, it will be called FilePicker1. If you rename it, then you should change the name above

  4. Configure the Filepicker

    With the query completed, you're ready to connect a widget that uploads a file and run the query:

    1. Back on the canvas, create a Filepicker widget.
    2. Set the Filepicker's Data Format property to Binary.
    3. Set the Filepicker's onFilesSelected property to run the query that uploads your file to Dropbox, and add callbacks to alert the user of the result.
      1. onFilesSelected > Execute a query > Select your query
      2. Click Callbacks in the properties pane.
      3. On success > Show alert > In the Message field, enter File uploaded.
      4. On failure > Show alert > In the Message field, enter There was an error.

    Your query is ready to test; upload a file to the Filepicker widget, click the button, and verify whether the upload is successful.


By now, you should have a fully functional setup that allows you to upload files to Dropbox directly from your Appsmith app. This guide has taken you through creating and configuring a Dropbox app, setting up an Authenticated API datasource with OAuth 2.0, and crafting a query for file upload. Additionally, you've learned how to configure a Filepicker widget and implement callbacks for successful or failed uploads.

Your new skills in integrating Dropbox file upload functionality will undoubtedly enhance your app's capabilities and provide a more seamless experience for your users. Remember, the key to mastering these steps is practice and experimentation. Don't hesitate to explore further and customize your app to suit your specific needs. Happy coding!