Loading...

Follow Dropbox | Developer Blog on Feedspot

Continue with Google
Continue with Facebook
or

Valid

We’re excited to announce the launch of our new Dropbox Technology Partner Program. We expanded our program to include three partner tiers and added a variety of new benefits. Better yet – it’s free to join. 

We created the Dropbox Technology Partner Program to team-up with innovative companies to help our 500 million users and 400,000 teams work more seamlessly across best-of-breed tools and solutions. By building and partnering with Dropbox, you can deepen your product offering, expand your customer reach, and create more value for your users.

Program benefits

As a Dropbox Technology Partner, you’ll receive benefits that help develop, market, and grow your business. 

Program benefits vary by tier but can include: 

  • Free Dropbox Business sandbox accounts for additional development, testing, and sales demo purposes
  • Presence on the Dropbox App Showcase
  • Eligibility to be featured in Dropbox marketing campaigns
  • Access to marketing materials and templates 
  • Lead referral program for a 10% referral fee*
  • Program newsletters & communications
  • Technical support from the Dropbox team

View the full list of program benefits here.

*Separate agreement and conditions apply.

How to apply

The Dropbox Technology Partner Program encompasses three partner tiers. To be considered, applicants must meet the following requirements:

Developers interested in the new Dropbox Technology Partner Program can learn more and apply here

If you don’t yet meet the requirements to apply for the program today, we’re still here to support you as a Dropbox developer. Check out our support resources, events, and community engagement opportunities here

Build with Dropbox today at   www.dropbox.com/developers

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

If you’re from a startup, then you know that interacting with your customers’ files takes a lot of effort. Why not tap into that functionality from a brand trusted by over 500 million users? Spend your time creating value for your users instead of building a filesystem by integrating with Dropbox. With the Dropbox APIs, you can access, work with, and share Dropbox content with your users right within your product, and we’ll teach you how. 

The Dropbox Developer Build Program was created by developers for developers to help you build and launch your Dropbox integrations faster. 

We’re inviting startups in Austin to apply to be part of the first class of the Dropbox Developer Build Program.

The program kicks off with an in-person event on Wednesday, July 31 in Austin, including:

  • Sessions from the Dropbox and HelloSign team to teach you everything you need to know about building with our APIs
  • A half-day interactive coding session to start building with examples of common use cases, like file access and sharing.
  • Plenty of time with the Dropbox technical teams to ask questions about security or performance, troubleshoot errors, remove roadblocks, and discuss use cases
  • A discussion with the Moleskine team about how they build their Dropbox integration

Head to our event page to see the full agenda for the Dropbox Developer Build Day in Austin and apply to attend.

Following the in-person event, the program will continue with opportunities to work with the Dropbox team to get your integration launched.

You should apply if you’re a startup with an app or use case that works with files but have not yet built (or completed building) your integration with Dropbox. If accepted into the program, you and your team will be invited to join the first Developer Build Day on Wednesday, July 31 in our Austin office for lots of learning, food, and fun. 

The deadline to apply for the first Build Day is July 3rd. We are accepting a limited number of applicants on a rolling basis in order to keep the event small and impactful.

If you’re not based in Austin, subscribe to our blog or follow us on Twitter for future announcements of the Dropbox Developer Build Program launching in a city near you. 

Come build apps that power content and collaboration with Dropbox!

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Dropbox announced an integration with Google Cloud to enable users to create, open, and edit Google Docs, Sheets, and Slides files in Dropbox. 

Soon, using the Dropbox API, developers can integrate with G Suite content. New endpoints and extensions to existing endpoints will help Dropbox developers work with these files to serve shared users. This post outlines the changes and updates you should be aware of when handling Google Docs, Sheets, and Slides with the Dropbox API.

Non-Downloadable Files

G Suite files will be returned by files/list_folder, and can be moved, renamed, and deleted like other Dropbox files. Previews and thumbnails are supported as well.

However, as online-only files, they are not directly downloadable. files/list_folder & files/get_metadata have been updated accordingly, and will return new metadata:


{
    "entries": [
        {
            ".tag": "file",
            "name": "Prime_Numbers.gsheet",
            "id": "id:a4ayc_80_OEAAAAAAAAAXw",
            "client_modified": "2015-05-12T15:50:38Z",
            "server_modified": "2015-05-12T15:50:38Z",
            "rev": "a1c10ce0dd78",
            "size": 7212,
            "path_lower": "/homework/math/prime_numbers.gsheet",
            "path_display": "/Homework/math/Prime_Numbers.gsheet",
            "is_downloadable": false,
            "export_info": {
                "exports_as": "xlsx"
            },
            ...
        }
    ...
}

The new is_downloadable value will indicate if calling files/download is supported to return the binary file. Calling files/download and related endpoints will return an unsupported_file exception when is_downloadable is false.

Non-downloadable files can instead be exported in the new files/export API call, to an appropriate filetype indicated in the file’s export_info.  

The new include_non_downloadable_files parameter on files/list_folder, which defaults to true, can be used to omit these types of files from list results.

Shared Links Update

To date, shared links have granted read-only access to content. Starting with G Suite, some types of Dropbox files may also allow someone with the link to edit as well.  We have enhanced our shared links API to support this.

Shared links may have a link_access_level parameter, which defines read-only or editable. This new parameter may be returned by sharing/list_shared_links and settable by sharing/create_shared_link_with_settings.  


{ 
  ....
  "url": "https://www.dropbox.com/scl/fi/r0xdzphoh99eef2fazh8q/new%20gsheet.gsheet?dl=0&rlkey=yil8l6grehzwi8tfkg5sbiqoe",
  "id": "id:0uVLZNU2SdAAAAAAAAAQ7w",
  "name": "new gsheet.gsheet",
  "path_lower": "/new gsheet.gsheet",
  "link_permissions": {
    "link_access_level": {
      ".tag": "viewer"
    }       
    "effective_audience": {
      ".tag": "public"
    }
  }
}

If the link access level is unspecified, the access level will be “viewer” by default.

With this enhancement, it will be possible for these types of files to have multiple links — one for views and one for edits. The view access level can be used in conjunction with the audience parameter, so you could create a public view only link and an editable link for the team.  

Please also note the following behaviors:

  • G Suite links may not be returned by sharing/list_shared_links if a path is not specified. Use the direct parameter.
  • The password and expiration settings are not currently supported for G Suite shared links and will return an invalid_settings error if set.
  • These links will have an effective_audience parameter returned instead of resolve_visibility to indicate the effective visibility of the link.  Eventually all links will transition to return effective_audience instead. 
  • Historically, shared links have been unique to the link creator and content. Thus, the same piece of shared content may have multiple links created by different users. Starting with G Suite files, some types of shared links may be unique to the content only, so all users share the link to the content.
Testing

If you’re part of a Dropbox Business team, your admin can enable G Suite access in the Dropbox Admin Console so that you can test against the new document types in Dropbox.

Please feel free to contact us here with any questions or feedback about using the Dropbox API to manage G Suite files in Dropbox.

Build with Dropbox today at   www.dropbox.com/developers

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

File upload from a web browser can be a hassle for both the developer and the end user. By integrating with Dropbox, you can help your users easily get to their files stored in Dropbox and streamline uploads into your app without the need for error handling or multipart form data with backend code.

The Dropbox Chooser is an easy-to-implement, pre-built component that allows users to access their Dropbox files from within your app. Simply include our JavaScript snippet to add a file-browsing UI and handle authentication to a users’ Dropbox account. This post will cover the three simple steps to add the Dropbox Chooser to your website or application.

Step 1: Create Your Dropbox App

Anything developers build on Dropbox needs to connect through a Dropbox app. If this is your first time creating a Dropbox app, head to our step-by-step setup wizard in the App Console. This will guide you through creating your Dropbox app. 

Your Dropbox app has a unique app key that can be used (along with the app secret) to generate access tokens for making calls to the Dropbox API by implementing an OAuth flow. The Chooser helps you access files selected by a user without requiring a deep integration through OAuth, though you can certainly use the Chooser in combination with calls directly to the API to build more complex integrations.

The Chooser itself can be implemented with any app permission level. While the user will be able to browse their entire Dropbox account with the Chooser, your app will only have access to the files explicitly selected by the user. You can read more about app permissions for Chooser here

The Chooser also uses your unique app key to identify the app to Dropbox. To do this, you’ll need to include the Dropbox app key within your HTML in the next step. For now, let’s grab the app key from the “app settings” page within the App Console

Before moving on to the next step, add your application’s domain name into the “Chooser/Saver domains” field in your app settings within the App Console. This keeps other websites from impersonating your app. You can also add the site to your “app settings” later — you’ll be able to test locally without it.

Step 2: Integrate the Chooser into your App

With our Dropbox app prepared, we’re ready to include the Chooser into our website or app. For this example, we’ll use some basic HTML and JavaScript to show what’s possible. You can also access basic Chooser set up instructions on the Dropbox developer website.

To get started, copy and paste this boilerplate into a new HTML file:


<!DOCTYPE html>
<head>
        <meta charset="UTF-8"/>
        <title>Chooser JS Integration Example</title>
        <script type="text/javascript" 
                src="https://www.dropbox.com/static/api/2/dropins.js" 
                id="dropboxjs" 
                data-app-key="YOUR-APP-KEY">
        </script>
</head>
<body>
        <h1>An Example of a Minimal Integration of Dropbox's Chooser JS</h1>
        <div id="dropboxContainer"></div>
        <script src="custom.js"></script>
</body>
</html>

There are a couple things to note here. First, the <script> tag loads the Chooser from Dropbox. Be sure to replace "YOUR-APP-KEY" with the app key you grabbed from the App Console in the previous step. We also have an empty <div> and a call to a custom JavaScript file. We need to create that file and connect the <div> to the Chooser.

Again, here’s some boilerplate JavaScript. Copy it into a new file named `custom.js`:

 

    options = {
            success: function(files){
            
            },
            cancel: function(){
                    
            },
    };
    var button = Dropbox.createChooseButton(options);
    document.getElementById("dropboxContainer").appendChild(button);

Here we create a new button by calling Dropbox’s createChooseButton function. We’ve passed a very basic options variable, which we’ll improve upon later. Next, we insert the button into the page by referencing the <div> in our HTML.

Save your files in the same directory and load them up using a local web server of your choice; you will receive errors if you try to load them directly in your browser. 

Here is an example using express, a lightweight web framework for Node.js:

1. Run <npm init -y && npm install --save express> in your terminal.

*You’ll need npm (node package manager) to use this particular sample.

2. Create a ‘server.js’ file and add the following code:


var express = require('express');
var app = express();
// use line below if html file is in root directory
app.use(express.static(__dirname));
// use line below if html file is in nested folder
// app.use(express.static(path.join(__dirname, 'public')));
app.get('/', function(req, res) {
    res.render('index.html');
});
app.listen(8000)
console.log('Server listening on localhost:8000');

3. Run your server with a node server.js command.

You’ll have a page with a simple button that browses Dropbox files with very minimal code. In the next step, we’ll do something with the selected files.

Step 3: Customize the Chooser to Your Needs

The Dropbox Chooser is meant to support multiple use cases where you might otherwise need a direct file upload. However, since you don’t have to handle the bytes directly, some uses won’t even need a back-end at all. Your success function (empty in our previous example) will get an array of files, each with data about the file, such as the name and link. See the Chooser documentation for the full list of available fields.

For this example, we’ll help users email PDF documents for others to review. This could be integrated as a lightweight publishing step within a workflow, where co-workers, or others involved with the project, would receive the email with preview links. To do this, we will only need the name and link fields.

To ensure this process is smooth, we will modify our options parameter by including several fields, as well as adding some code to the success function. Replace the previous `custom.js` file with the following JavaScript:


options = {
        success: function(files){
                send_files(files);
        },
        cancel: function(){
        },
        linkType: "preview",
        multiselect: true,
        extensions:['.pdf'],
};
var button = Dropbox.createChooseButton(options);
document.getElementById("dropboxContainer").appendChild(button);

We’ve set the linkType to preview to provide the user a preview link to the document for sharing. While this approach is useful for an end user, you’ll want to use the direct option if you intend to transfer the file to a backend.

There are a couple of other Chooser options we’re using. First, we set the multiselect field to true, which allows users to choose more than one file. Secondly, we limited our extensions to .pdf only—you can include multiple extensions as strings in the array, or remove the option to allow any file type.

The success function now calls to another function, send_files(), which will process the PDFs the user selects in the Chooser interface. Add this additional JavaScript to the bottom of your `custom.js` file:


function send_files(files) {
        var subject = "Shared File Links";
        var body = "";
        for(i = 0; i &amp;amp;amp;amp;lt; files.length; i++){
                body += files[i].name + "\n" + files[i].link + "\n\n";
        }
        location.href = 'mailto:coworker@example.com?Subject='+ escape(subject) + '&amp;amp;amp;amp;amp;body='+ escape(body),'200','200';
}

Our JavaScript function first sets a subject for the email, which we’ll use to send the links to the user’s PDF files. The for loop goes through all the files from the Chooser, getting the name of the file and the link to the file on Dropbox. Finally, we construct the mailto link (note the email address), being sure to escape the subject and body so all the data will make its way to our local email program.

Restart your localhost server and load up the HTML file in your browser. After choosing files, you’ll be ready to send the email, with the links pre-filled into the body of your message.

Potential Enhancements

In today’s mobile work environment, quick and easy file management through cloud services is essential for streamlined project communication. Dropbox’s Chooser gives developers a hassle-free component that easily integrates within their web applications, while providing the user an intuitive file browser with minimal code.

While the example we’ve shown above is pretty basic, the Chooser is a versatile component, with many other customization options. For example, you could preview the contents with a call to window.open(). Or, work with the content in your app using a direct link. Anywhere you might use a standard file upload in your app’s workflow, you can instead more nimbly access a user’s Dropbox files with the Chooser. 

If this blog post was interesting to you, you should also check out the Dropbox Saver. With the Saver implemented into your app, a user can add files of any size into their Dropbox instantly.

For more Dropbox tutorials, check out our previous blog posts or our reference page.

If you have any questions about Chooser or need help with anything else, you can always contact us here.

Build with Dropbox today at   www.dropbox.com/developers

Take Our Poll
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

It’s the first of the month and that means you’re about to be inundated with invoices from contractors. You could head it off with a bulk email, but then you’re wading through replies with attachments that could easily be lost in the shuffle of other activity. This is a perfect use case for Dropbox and our API to help automate tasks like file collection.

File requests help you structure these repeating duties. Whether it’s contractor invoices, student homework assignments, or new employee headshots, you can use file requests to collect and organize files from anyone, right in your Dropbox account.  

How file requests work

You can create file requests from the user interface or via the API. Before we show the automated method, it’s useful to see how it works manually. You can create a file request from the file requests page while logged into your Dropbox account. When creating a request, you can select the location in your Dropbox where the files should be saved as well as set collection deadlines. These requests can be sent to anyone, whether they have a Dropbox account or not, and are great for collecting large files.

To learn more about the process of manually creating Dropbox file requests, check out our help center article or business guide. If you’re interested in the experience of the user you’re sending the request to, this help center article covers how to upload a file once you’ve been sent a file request. 

Automate file requests

Creating file requests manually from the Dropbox UI is a quick and simple process, but can be repetitive when performed often. The Dropbox API helps streamline these sorts of tasks, big and small.

Let’s see what it takes to create a file request via the API. We’ll use the Python SDK, but you can implement this in any Dropbox SDK or directly via HTTP calls.

To start, you’ll want to install Dropbox for Python

To create a file request in Python requires only a few lines of code:

import dropbox

dbx = dropbox.Dropbox('YOUR_ACCESS_TOKEN')
req = dbx.file_requests_create(title="August invoices", destination="/File requests/August")
print req.url
print req.id

You’ll want to include your access token, and change the title and destination. See our OAuth guide for more information on how to get an access token and build OAuth into your app.

Assuming your access token can use your entire Dropbox account, the destination can be any path, even if the folders don’t exist. It’s relative to your Dropbox account or folder, and should start with a slash. Since you’ll be creating many of these, it’s a good idea to create a folder to hold all of your file requests.

The code above prints out the request URL, which you can copy and paste to any destination. You’ll want to fully automate your file requests so you can send them monthly, weekly, or any cadence you need. You can include the URL in an automated email message, or a call to the Slack API (or other chat app).

The code also prints the request ID, which you will use to retrieve requested files in the next step.

Take a look at the documentation for dropbox.file_requests.FileRequest to find out what other properties are available to print.

Finally, you’ll want a way to run your script whenever it’s needed. You can use a cron job or a scheduled event service.

Now that you’ve created file requests, you want to also see their status.

Retrieve your requested files

Once you’ve sent your file request to contractors, students, or others, you can wait for the files to come in. They’ll come to your Dropbox folder, just as they did in the manual example. If you get desktop notifications, you’ll know whenever someone uploads on your file request page. There are a couple ways to use the Dropbox API to check in on your file requests.

You can retrieve a current count of files uploaded to a request with a few more lines of Python:

import dropbox

dbx = dropbox.Dropbox('YOUR_ACCESS_TOKEN')
req = dbx.file_requests_get("YOUR_REQUEST_ID")
print req.file_count

Again, you’ll need to include your access token. You’ll also need to know the ID of your file request from the prior step. 

Among the data you get back is the number of files that have been uploaded. The code above prints out the current `file_count` field.

Because file requests use a normal Dropbox folder, you can list the files using the primary Dropbox API. Here’s how I’d print a list of filenames for my August invoice example:

import dropbox

dbx = dropbox.Dropbox('YOUR_ACCESS_TOKEN')
req = dbx.files_list_folder("/File requests/August")
for f in req.entries:
  print f.path_display 

This approach will work up to 2,000 files, which covers most file request use cases. Keep in mind, multiple file requests can use the same folder, which could impact what files end up in this folder. Additionally, anyone with access to the folder could add files outside of the file request system.

Build Dropbox into your workflow

If Dropbox is already a part of your workflow, use the file requests API to simplify and organize how you collect files.

If you’re interested in more Dropbox tutorials, check out our previous blog posts, which contain guides to:

  1. Writing a script for a simple expense organizer app
  2. Writing a photo gallery Web Service from scratch with Node.JS and Dropbox with production deployment on Heroku
  3. Photo gallery tutorial with tags using the File Properties API
  4. OAuth code flow implementation using Node.JS and Dropbox JavaScript SDK

Have ideas for other guides you would like to see? Let us know by posting in the Dropbox Developer Community forums

If you have any questions about this or need help with anything else, you can always contact us here.

Build with Dropbox today at   www.dropbox.com/developers

Take Our Poll
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

In this blog post we show you how to implement an OAuth authorization code grant flow using Node.JS and Dropbox JavaScript SDK that works with multiple users.  The code presented here is for a development environment, as you need to carefully implement security measures not considered in this blog post when using a production environment. 

We will walk you through the configuration of a Dropbox application, installing and configuring the libraries needed for the project, and finally the code implementation that supports the OAuth authorization code grant flow using JavaScript. If you are unfamiliar with OAuth, we recommend you to read first the Dropbox OAuth guide.

Configuring a Dropbox app

You’ll need to have a Dropbox account to access the APIs. If you don’t already have one, you can sign up for a free account here. Then go to the Dropbox App console and click on Create app

Choose Dropbox API, App Folder access type, enter a unique name  and click on Create app. 

For more information about the App console and access type, visit our Getting Started guide.

Now enable additional users in this app. In the settings page of your app you will find a button to do this. This step is important if you want users different to the owner of the app to be authorized.

Pre-register a redirect URI in the Dropbox admin console. For dev purposes, you can use localhost which is the only permitted http URI. So enter http://localhost:3000/auth and press the Add button.

Setting up your project

To install Node.JS, go to Nodejs.org and get the latest version. For this project, we need support for EcmaScript7 (ES7) so any version above 8.2.1 will work.

After Node.JS is installed in your local dev environment, create a project structure using Express generator. We will use Handlebars as the template engine which leverages actual HTML.

For more information about Express, visit their website.  We also offer a short explanation about an Express project structure in this tutorial.

First install express generator running:


npm install express-generator -g

Now create a project called dbxoauth using the handlebars template engine.  Run the following command:

express --hbs dbxoauth

Then, navigate to the folder created and install dependencies:

cd dbxoauth
npm install

We will be using the following node libraries:

  • dotenv: to avoid hardcoding sensitive data such as keys and secrets
  • express-session: to enable Web sessions used to store OAuth tokens and avoid the need to authenticate each time, as well as adding support to multiple users
  • dropbox: Dropbox JavaScript SDK
  • isomorphic-fetch: library required by Dropbox JavaScript SDK
  • crypto: to generate random strings
  • node-cache: to store data in local cache

Run the following command to install the libraries above:


npm install dotenv express-session dropbox isomorphic-fetch crypto node-cache --save

It is important not to hardcode any sensitive information. What you can do is create an .env file where you place sensitive data and make sure that file is never uploaded to a remote repository independently of the version control system you use.  If you are using git, then you will add the .env to the .gitignore file. The dotenv library will read values from the .env file and add them to the current process. You can access these values via process.env.<variable_name>

To load the values in the .env file, add this code as the first line of your app.js file:

app.js

require('dotenv').config({silent: true});


And create a .env file at the project root level with the following content:

.env
 


DBX_APP_KEY=<app key from Dropbox dev console>
DBX_APP_SECRET=<app secret from Dropbox dev console>
SESSION_ID_SECRET=<create a secure secret of your liking>

Web sessions will provide a mechanism to store access tokens and avoid the need to authenticate each time, additionally are a key element to handle multiple users. Let’s configure the middleware that enables Web sessions.  For this, we use the express-session library.  Whenever a browser makes a request to the server, a session for that user is retrieved and a cookie on the client will hold a reference to that session.

In the app.js file, right after the app variable is assigned ( var app = express(); ) add the following code:

app.js

//session configuration
const session = require('express-session');

let session_options = {
  secret: process.env.SESSION_ID_SECRET,
  resave: false,
  saveUninitialized: false,
  cookie: { secure: false } //only for dev puporse
}
app.use(session(session_options));

This is minimal initialization that sets a cookie when the browser first hits the server and allows to use non-secure http connections for development purposes only. Notice that session data is not saved in the cookie itself, just the encrypted session ID. Session data is stored server-side. The SESSION_ID_SECRET is used to sign the session ID cookie.

Note: If you plan to move to a production environment you need to take special attention to this configuration. You can learn more about this library in their GitHub repository. It also uses by default MemoryStore that according to their site “Is purposely not designed for a production environment. It will leak memory under most conditions, does not scale past a single process, and is meant for debugging and developing”.  Additionally, whenever you stop the server, the MemoryStore is cleared out. You may consider using Redis as we explain in this other tutorial.

OAuth code flow

We will implement an OAuth authorization code grant flow with the below following sequence.

When a request is received in the home route /, we check if the session for that user has already a token stored in it, if that is the case, we can use the token directly to get resources from Dropbox, if not, then we need to get a token.  To do that, we generate a random state using the crypto library and the node-cache library to save in cache for a few minutes the state as key and the session id as value. Then we use the Dropbox JavaScript SDK to obtain the authorization URL and redirect the user to that address. This will handle multiple users as each user will have a different state and session id. If the user takes too long to validate credentials and authorize the app with Dropbox, the cache will expire adding an extra layer of security.

After completing authentication and authorization with Dropbox, the user will be sent back to the redirect URL along with the state string we sent and a code.  We validate the state checking that there was a session id for it and use the Dropbox JavaScript SDK to exchange the code for a token. Finally, the token received will be saved within the current session so next time the user reaches the home page /, will be able to use Dropbox resources as long as the token is still valid bypassing authentication.

To implement this flow, we need to add two routes to /routes/index.js.  You can simply replace the whole file with the following content:

/routes/index.js
const
crypto = require('crypto'),
NodeCache = require( "node-cache" ),
Dropbox = require('dropbox').Dropbox,
fetch = require('isomorphic-fetch');

//Redirect URL to pass to Dropbox. Has to be whitelisted in Dropbox settings
const OAUTH_REDIRECT_URL='http://localhost:3000/auth';

//Dropbox configuration
const config = {
  fetch: fetch,
  clientId: process.env.DBX_APP_KEY,
  clientSecret: process.env.DBX_APP_SECRET
};

var dbx = new Dropbox(config);
var mycache = new NodeCache();

module.exports.home = async (req, res, next)=>{

  if(!req.session.token){

    //create a random state value
    let state = crypto.randomBytes(16).toString('hex');

    //Save state and the session id for 10 mins
    mycache.set(state, req.session.id, 6000);

    //get authentication URL and redirect
    authUrl = dbx.getAuthenticationUrl(OAUTH_REDIRECT_URL, state, 'code');
    res.redirect(authUrl);
  
  } else {

    //if a token exists, it can be used to access Dropbox resources
    dbx.setAccessToken(req.session.token);

    try{
      let account_details = await dbx.usersGetCurrentAccount();
      let display_name = account_details.name.display_name;
      dbx.setAccessToken(null); //clean up token

      res.render('index', { name: display_name});

    }catch(error){
      dbx.setAccessToken(null);
      next(error);
    }
  }
}

//Redirect from Dropbox
module.exports.auth = async(req, res, next)=>{

  //Dropbox can redirect with some errors
  if(req.query.error_description){
    return next( new Error(req.query.error_description));
  }

  //validate state ensuring there is a session id associated with it
  let state= req.query.state;
  if(!mycache.get(state)){
    return next(new Error("session expired or invalid state"));
  }

  //Exchange code for token
  if(req.query.code){

    try{
      let token = await dbx.getAccessTokenFromCode(OAUTH_REDIRECT_URL, req.query.code);

      //store token and invalidate state
      req.session.token = token;
      mycache.del(state);

      res.redirect('/');

    }catch(error){
      return next(error);
    }
  }
}

Finally, modify the home page to display the information retrieved from Dropbox. When a user successfully authenticates and has a valid token, we get the display_name using the Dropbox JavaScript SDK and show it on the page.  Replace the /views/index.hbs with this content

/views/index.hbs


<h1>Logged in!</h1>
<p>Hello {{name}}</p>

You can now start the server locally on your machine

npm start

And go to http://localhost:3000 in your browser. You will go through the authentication, authorization flow and finally to a page that shows your name retrieved from Dropbox.

Congratulations! You have successfully implemented an OAuth authorization code grant flow.

Where to go from here

We recommend checking out the Dropbox OAuth guide for more information on OAuth.

If you’re interested in more Dropbox tutorials, check out our previous blog posts, which contain guides to:

  1. Writing a script for a simple expense organizer app
  2. Writing a photo gallery Web Service from scratch with Node.JS and Dropbox with production deployment on Heroku
  3. Photo gallery tutorial with tags using the File Properties API

Have ideas for other guides you would like to see? Let us know by posting in the Dropbox Developer Community forums

If you have any questions about this or need help with anything else, you can always contact us here.

Build with Dropbox today at   www.dropbox.com/developers

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

The get_temporary_upload_link API endpoint is now officially out of preview and available for production use. Developers can use this API call to get pre-signed upload URLs. 

Use Case

One of the most common actions a Dropbox integration will perform is to add new content.  

The upload endpoint is used to push binary content to Dropbox. This is perfect for apps where the file is local to the machine connecting to Dropbox. However, for some types of client-server applications that integrate with Dropbox, this may be not optimal. For example, you may have a server-based application which manages all state and interaction with Dropbox and a mobile client that connects your server.  

In this scenario, uploading a new file to Dropbox via your app’s client with the upload endpoint would mean:

1. Your client uploads the file to a temporary location on your server

2. Your server uploads the file to Dropbox via the API

Enter pre-signed upload URLs. Using the get_temporary_upload_link endpoint allows you to create a temporary, one-time use URL that can be sent to your client to upload a file. In this model:

1. Your client asks your server for an upload URL

2. Your server issues a call to Dropbox to get a URL, and returns that URL to your client

3. The client posts the file to Dropbox directly to the returned URL

This method saves your server the storage, network traffic, and complexity of forwarding this content. It’s significantly faster end to end, while still allowing for OAuth credentials to be stored and secured centrally in your server infrastructure.

Example

Here’s a python code snippet of how a server and client would use this URL.

Server

import dropbox
from dropbox.files import CommitInfo, WriteMode</pre>
# Recieve a request from the client to get an upload URL

dbx = dropbox.Dropbox(<ACCESS TOKEN>)
commit_info = CommitInfo(path=<FILE PATH>, mode=WriteMode.overwrite)
temp_link = dbx.files_get_temporary_upload_link(commit_info=commit_info)
print(temp_link.link)

# send upload url to client

Client


    import requests
    
    # Request an upload url from the server
    
    data = open('<LOCAL FILE>', 'rb').read()
    res = requests.post(url='<UPLOAD URL>', data=data, headers={'Content-Type': 'application/octet-stream'})
    if (res.status_code == 200):
        print("Success. Content hash: "+res.json()['content-hash'])
    elif (res.status_code == 409):
        print("Conflict. The link does not exist or is currently unavailable, the upload failed, or another error happened.")
    elif (res.status_code == 410):
        print("Gone. The link is expired or already consumed.")
    else:
        print("Other error") 

If you have any questions about this or need help with anything else, you can always contact us here.

Build with Dropbox today at   www.dropbox.com/developers

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Dropbox is all about enabling teams to easily collaborate around content. There are many use cases for integrating directly with the Dropbox API, but there are also some scenarios where integrating with a workflow automation platform will allow you to ship a great solution faster than building them yourself. Whether you’re building out workflows for your company, customers, or yourself, Workato uses the Dropbox API to help you automate processes around content in Dropbox and other applications.

Workato can poll for Dropbox events or receive events using webhooks. These events are then processed using the business logic defined in a Workato recipe to execute any number of tasks across one or more endpoints. For example, Workato can listen for a new CSV file added to a Dropbox folder and then upload the information from the file to a database, like Redshift; or when attachments are added to a Jira issue, Workato can automatically create a dedicated Dropbox folder, move the attachments to the folder, and add a Dropbox shared link to the Jira issue. Apart from real-time automations, you can also perform batch operations—like bulk uploading files from Dropbox to Amazon S3 at specified intervals. 

Workato offers an out-of-the-box Dropbox connector to handle all your integrations and workflow automations involving Dropbox. You can clone and tweak over 225K publicly available recipes to build your own custom workflow. 

Here are a few of the most popular Dropbox automations among developers to help you with your team’s workflows:

Streamlining case and bug management

Most developers use an app stack to report, track, and resolve technical issues. For example, customers may upload supporting documentation—like screenshots of the bug—to an app like Dropbox, but your dev team likely works with a ticketing app like Zendesk and a project management app like Jira or Github

This means there’s often a disconnect between what the end user reports and what you’re working on. It also means resolution takes longer, because you have to switch between apps. 

Instead of manually reviewing and appending this documentation, you can automate the process with Workato. When a customer submits a ticket in Zendesk with accompanying screenshots, Workato can create an initial issue in Jira or GitHub based on the ticket’s priority. Workato can also upload the screenshot to a new Dropbox folder for storage. As changes are made to the ticket in Jira–and as any screenshots of the solution are uploaded to Dropbox–Workato can sync them to the right Zendesk ticket. 

Intelligent approval workflows via Slack

Documents, such as UI/product designs and architecture documents, typically need to be approved before they can be implemented. When a member of your development team or a designer uploads a document/design to a folder marked “for approval,” Workato will pick up the new document and send a Slack message to the approver via Workbot, an enterprise platform bot for secure approval workflows in Slack.

The approver can simply click a button in Slack to approve or not. If the document is approved, Workato will move the document to a different folder in Dropbox, perhaps one called “final design.” If the document is not approved, Workato will move the document to a different folder for revisions. Workato will also send a Slack notification to the person who uploaded the document seeking approval with the status update.

Automatically grant access to folders 

When new developers join your team, you want to make sure they have access to all the appropriate resources. This often includes Dropbox folders where you store documentation, product screenshots, and other content.

It’s easy to automate the processes of granting access to these folders with Workato. As soon as a new developer is marked as an active employee in your company’s HR app, like Namely, Workato can provision a new Dropbox account for them with the correct level of access. Similarly, when a developer changes groups or leaves the company, access rights can be automatically changed.

By leveraging Workato’s out-of-the-box connectors for Dropbox, you can integrate Dropbox with other applications, like Jira, Slack, and GitHub, to automate workflows across Dropbox and all your other apps! 

Learn more about Workato’s integrations and automations for Dropbox here.

Build with Dropbox today at   www.dropbox.com/developers

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

FlowVella is an interactive platform for building and viewing presentations on mobile. We met the CEO of FlowVella, Brent Brookler, at a Dropbox Developer Meetup in Seattle and were excited to learn about their integration with Dropbox. 

We asked Brent to write a guest post on our developer blog sharing why and how FlowVella integrated with Dropbox on their road to change the presentation landscape. Scroll on to read Brent’s contribution. 

Genesis of FlowVella

I started building software over 20 years years ago, and have been fortunate to work on projects with massive brands in content creation and marketing. In my previous company, we powered the American Idol text voting and built the first mobile game version of Family Feud. In my next company, we worked with CBS News and built the mobile versions of 60 Minutes, CBS News, CNET and other CBS News properties. After building dozens of content driven apps, I realized that the existing ‘presentation software’ hadn’t evolved for the mobile age. We set out to create a new way to share ideas and products in a mobile and touch first way. 

FlowVella is a cloud-based interactive presentation platform for creating, publishing, sharing, and viewing presentations. Users can integrate various content types into one cohesive experience as FlowVella allows embedding of text, images, PDFs, video and gallery objects in easy linkable screens, defining modern interactive presentations. When viewing a presentation on Flowvella, the audience can take different paths to play videos, progress through slides, or open a PDF based on the way the conversation and interest flows.

Our customers range from small businesses to larger enterprises mostly in manufacturing, home services, and real estate. With the launch of our kiosk app, Flow Kiosk, in August 2018 we’re seeing a wider range of use cases for trade shows, event booths, retail stores, and museum exhibits. Because FlowVella presentations work without an Internet connection via our iPad/iPhone app, a Mac app, and website, they are ideal for in person sales presentations and as an interactive kiosk.

Integrating with Dropbox

FlowVella and Flow Kiosk users embed text, images, PDFs, video, sounds, GIFs, and gallery objects into their interactive presentations, and many users asked us specifically for the ability to add content directly from their Dropbox folders. It was a no brainer to integrate with Dropbox as our first external data source–our customers are Dropbox customers and building the integration was relatively painless. 

While the Dropbox Chooser application makes for an easily embedded Dropbox interface to select and upload files into your application, we have our own UI for choosing content and wanted to keep users in the same experience when adding content from any external cloud source. FlowVella is a native iOS app, written in Objective–C, so we used the Dropbox Objective-C SDK to browse and download Dropbox content into FlowVella presentations. 

We use the listFolder and listFolderContinue calls to populate the top level Dropbox folders and files. We also use the getThumbnailData call to populate the lists with proper thumbnails as many of the files our users are selecting are visual. We use DBFILESMetadata to determine the file type (e.g. .jpeg, .mov) for each piece of content and check if it’s compatible with the specific container format (e.g. image, video) that the user is adding it to within FlowVella. When a user chooses the content they want to add to FlowVella, we use the downloadData method to pull from Dropbox. The content is then added to the FlowVella canvas.

Reflections on the Dropbox API

The Dropbox API Framework and DBX Platform are easy to use, and the documentation was straightforward and helpful in our original launch. Additionally, because the community of developers building on the platform is so large, finding help and examples is always really easy. 

It took about a week to build and integrate the Dropbox API into our own ‘content selection’ system. We tested extensively, on several devices and every content type to ensure that the whole process worked. And, when it came time to launch our new app this fall, it was extremely easy to add Flow Kiosk and build out that integration. 

Today, Dropbox is one of our most popular integrations and is integral for our users’ workflows. FlowVella isn’t done integrating with Dropbox and we’re excited to see where we can expand support for our users next. 

We hope you enjoyed this guest blog contribution from Brent Brookler at FlowVella and that it gave you some ideas of how you can build or enhance your own Dropbox integration. 

To learn more about FlowVella and to see the Dropbox integration in action, head to flowvella.com. You can also contact Brent and the FlowVella team directly at info@flowvella.com

This was the first of many developer stories to tell. If you’re interested in having your app featured on the Dropbox developer blog, let us know.

To build your first Dropbox app, check out our getting started guide.

Build with Dropbox today at   www.dropbox.com/developers

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Dow Jones needed to assess over 230 applications for GDPR compliance. Learn how they automated their internal process to collect, synthesize, search and access the data using the Dropbox APIs.

The Challenge

When the EU approved GDPR—the General Data Protection Regulation—in April of 2016, companies around the world took notice. The new set of laws, scheduled to take effect two years later, included strict standards for companies with access to personal data.

With customers and employees across the globe, Dow Jones was no exception. The company’s GDPR team began work to evaluate data management, retention, and information flow policies across the company. As part of that effort, the team needed to assess any applications that processed personal data.

Alex Zhang is the software engineer who was tasked with making that process as efficient as possible. His team, which is part of the IT organization, administers and customizes the company’s SSO, HR and collaboration tools. Alex’s role on the team is to make “glue,” which is his word for the code he writes to make all those different systems talk to each other. In this case, his goal was to facilitate the collection of survey data on each of the company’s applications, synthesize that data and provide a simple way for the GDPR team to search and access it.

The Solution

He started by using a CMDB system to aggregate the company’s more than 230 applications and map them to their owners and users. At the same time, he developed an internal survey tool to share custom surveys—over 650 in total—with those employees for completion.

Next, he needed to create a way for Dow Jones’ GDPR team to easily access the survey data. His solution was to develop an ASP.net web form the GDPR team could use to request survey results for specific applications or users as needed. Each request triggered a custom application to query the survey database and generate a PDF report summarizing the results needed.

Finally, he needed a simple way to share the PDF reports with the GDPR team, which is where he turned to Dropbox. With the Dropbox APIs, Zhang’s solution created a Dropbox folder using the /create_folder endpoint, saved the PDF there using the /upload endpoint, and generated a shared link to the folder using the API’s shared link creation endpoint, /create_shared_link_with_ settings. Just minutes after submitting the request, the GDPR team then received a link in an e-mail, allowing them to go to Dropbox and download the requested report. A request for a report on total survey results would be ready in 10 minutes.

Visual of the Dow Jones GDPR workflow, including the specific Dropbox API endpoints used The Results

The speed and accuracy of Zhang’s solution was critical to Dow Jones’ GDPR compliance effort. The integration between the ASP.net portal and Dropbox produced a seamless end user experience for the GDPR team. “Everyone at Dow Jones has a Dropbox Business account and knows how to use it,” says Zhang. “Taking advantage of that helped us get the technical hurdles out of the way and give people fast, direct access to the data they needed.”

Automation was key to reducing the administrative overhead for everyone involved. “Automating the process allowed us to remove the human element,” says Zhang. “The less people have to get involved in managing data, the cleaner that data will be and the more time they’ll spend focusing on what they do best.”

Zhang raves about the Dropbox API’s ease of use. “Some APIs make developers jump through hoops,” Zhang said. “But Dropbox’s is simple and well documented and overall a pleasure to work with.”

“Some APIs make developers jump through hoops, but Dropbox’s is simple and well documented and overall a pleasure to work with.”

He expects the value of his system to extend beyond GDPR. He is evaluating its fit for other use cases and, for example, is already using it to manage the company’s Code of Conduct survey. “Dropbox offers a unique solution to something that was antiquated for decades,” explains Zhang. “It brings social functionality to storage through sharing, availability and collaboration. That’s a really powerful combination.”

If you’re interested in having your story featured on the Dropbox developer blog, let us know. To build your first Dropbox app, check out our getting started guide

Read for later

Articles marked as Favorite are saved for later viewing.
close
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Separate tags by commas
To access this feature, please upgrade your account.
Start your free month
Free Preview