Getting a List of Files Using the Dropbox API Chapter 4Creating a Dropbox app and initializing the SDK
Before we interact with the Vue instance, we need to connect to the Dropbox API through
the SDK. This is done via an API key that is generated by Dropbox itself to keep track of
what is connecting to your account and where Dropbox requires you to make a custom
Dropbox app.
Head to the Dropbox developers area and select Create your app. Choose Dropbox API
and select either a restricted folder or full access. This depends on your needs, but for
testing, choose Full Dropbox. Give your app a name and click the button Create app.
Generate an access token to your app. To do so, when viewing the app details page, click
the Generate button under the Generated access token. This will give you a long string of
numbers and letters - copy and paste that into your editor and store it as a variable at the
top of your JavaScript. In this book, the API key will be referred to as XXXX:
/**
* API Access Token
*/
let accessToken = 'XXXX';Now that we have our API key, we can access the files and folders from our Dropbox.
Initialize the API and pass in your accessToken variable to the accessToken property of
the Dropbox API:
/**
* Dropbox Client
* @type {Dropbox}
*/
const dbx = new Dropbox({
accessToken: accessToken
});We now have access to Dropbox via the dbx variable. We can verify our connection to
Dropbox is working by connecting and outputting the contents of the root path:
dbx.filesListFolder({path: ''})
.then(response => {
console.log(response.entries);
})
.catch(error => {
console.log(error);
});