Vue Dropbox Chooser

Illustration By: Udhaya Chandran

Last week we saw Vue Google Picker.

Now let’s see how we can pick a file from Dropbox using Chooser API.

Installing Vue and Creating a new Application.

(Skip to next section, if already done..)

Install vue-cli given Node v8.9 or above is installed.


Creating a new Project.

Setting up with Dropbox Chooser API

At first head to, and create a new App or select an existing App.

Creating a new app on the DBX Platform, you will need to:

1. Choose an API suitable for your Application.

2. The type of access you will be in need of.

3. Name for your App.

Create App Screen in Dropbox

After creating your App, go to

Click on App Console and Select your App from the List.

List of Dropbox Apps

Add the domains from which you would send requests to Dropbox API in here and note down your App Key

Add Domain

Now, let's start integrating it with Vue.

Create a component DropboxSelector and include Dropbox API script on mounted lifecycle hook of this component.

Chooser opens in a pop-up window, so you should only call this function from within a user-triggered event handler such as a click event.

The function which handles the User-Triggered Event.

Breakdown of the above Function :

Our final User Triggered function will be something like this :

Once all is set, you are all ready to test your Dropbox Chooser feature.

A simple working example can be found here.

This is Karthik representing Timeless.

If you find this blog post helpful, Share it with a friend.

If you find any difficulties please feel free to add your comments.