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 https://www.dropbox.com/developers/chooser, 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.
After creating your App, go to https://www.dropbox.com/developers.
Click on App Console and Select your App from the List.
Add the domains from which you would send requests to Dropbox API in here and note down your App Key
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.