Let's upload a text file to Dropbox

Here we'll show you how to use our JavaScript SDK and a server-side proxy language to upload a file to Dropbox. We’ll use PHP as our server-side proxy language for this tutorial, but you can also use Node.js, Ruby, Java, or Python.

To learn more about using non-PHP proxy languages, take a look at the Web Application Server tutorial.

Get Set Up

1Log in to Temboo. If you don't already have an account, you can register for free.

2Create a new .html file and save it as index.html into a folder where you'll save the rest of your project files.

3Create a new .php file and save it as proxy-server.php into the same project folder as your index.html file.

4Download the latest Temboo JavaScript SDK and unzip the file.

5Change the name of the resulting folder to js-sdk and move it into the same folder as your index.html file.

6Download the latest Temboo PHP SDK and unzip the file.

7Change the name of the resulting folder to php-sdk and move it into the same folder as your index.html.html file. Your project folder should look similar to the screenshot below:

A properly configured project folder

Create a Dropbox Application

8For the Dropbox Choreos, you'll need a valid Dropbox account and a Dropbox app, which you can create in the Dropbox App Console. The app name and domain can be whatever you like. Make sure to use the settings shown in the screenshot below when creating your new Dropbox app:

The Dropbox app console with the app settings you'll need for this example

The Dropbox app console with the app settings you'll need for this example

9After creating your Dropbox application, visit the Dropbox OAuth bundle. Starting with the InitializeOAuth Choreo, use these Choreos to grant your Dropbox application access to interact with Dropbox on your behalf. This short video demonstrates how to use our OAuth Choreos, and it's a good idea to take a break and watch it now before you dive into this step. You'll need the access tokens returned by this process to complete the rest of this tutorial.

10Go to the Dropbox > FilesAndMetadata > UploadFile Choreo in our Library. Select JavaScript from the drop down menu at the top of the page. Make sure to fill in "sandbox" for Root input. Enter your Dropbox access tokens and click on the Save Profile button to save your Dropbox app details. Now you can reuse these Dropbox authentication details on any Dropbox Choreo in our Library. Using a Profile will also make your code simpler and more secure.

Test the Choreo

11Now we can test the Choreo directly from our website. We'll upload an image using a URL so we can leave FileContents blank. Instead, we'll put the URL of the image in the FileContentsFromURL field. You can test with this astronaut image:


12Now just put any name in the FileName field. We'll put "astronaut" since our image is of an astronaut.

13Click Generate Code to test the Choreo from our website, and you'll see some details about your uploaded file in the Dropbox API response in your browser. If you go to your app folder in Dropbox, you'll see your file there!

Start Coding

14Scroll down to find the Code section of the Choreo page. Copy and paste the code snippet into your index.html file.

15In the same file, make sure that your script source points to the correct location of the temboo.js SDK file.

<!-- Adjust to point at the copy of the Temboo JavaScript SDK on your server -->
<script src="js-sdk/js/temboo.js">< /script>

16In the same file, we'll also want to confirm that the location of our proxy is correctly specified. Our server is proxy-server.php.

// Instantiate the client proxy with the URI of your server proxy
var temboo = new TembooProxy('proxy-server.php');

17You'll notice another code snippet box below the Code section on the Choreo page called Proxy Code. Use the dropdown menu to select PHP, then copy and paste the code snippet into your proxy-server.php file.

18In the proxy-server.php file, make sure that the require_once line points to the correct location of the PHP SDK file in the php-sdk folder that you downloaded earlier.

require 'php-sdk/src/temboo.php';

19Let's also make sure that we can see the success of our file upload in the browser. In your index.html file, find the find the line in the showResult success callback function where raw outputs are displayed and change the console.log statement to a document.write statement:

        // Display raw outputs
        for(var name in outputs) {
            document.write(name + ': ' + outputs[name]);

20Run your PHP server.

21Navigate to your index.html page in a browser. You should see the details of your file upload, and you'll have a new image file of an astronaut in your Dropbox folder.

The Dropbox API responds in the browser with details of the file upload

What next?

We're all finished! You now know how to write a JavaScript application that uploads an image file from a URL to your Dropbox folder. Check out the rest of the 2000+ Choreos in our Library and discover all sorts of other valuable data that you could save to Dropbox.

Once you've got your code up and running, you're ready to move on and do more. From monitoring your running applications, to moving your generated Temboo code to your preferred development environment and sharing it with colleagues, collaborators and friends - we've got you covered.

Get Live Updates About Your Application

Integrate Temboo with Slack to get up-to-the-second notifications and alerts about your deployed Temboo code.

Commit Code to GitHub

Commit Temboo-generated code directly to GitHub and share with the world. Learn more.

Need help?

We're always happy to help. Just email us at support@temboo.com, and we'll answer your questions.