Upload Files to Dropbox in Your App

Goal

Prerequisites

Overview

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: 
     • https://content.dropboxapi.com/
   • Authentication Type: OAuth 2.0
   • Grant Type: Authorization Code
   • Access Token URL:
     • https://api.dropboxapi.com/oauth2/token
   • 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:
     • https://www.dropbox.com/oauth2/authorize
   • 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 (https://content.dropboxapi.com/) 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.

Conclusion