4
Getting a List of Files Using the
Dropbox API
Over the next few chapters, we are going to be building a Vue-based Dropbox browser.
This app will take your Dropbox API key and allow you to navigate to folders and
download files. You will learn about interacting with an API within a Vue app, the Vue life
cycle hooks, including the created() method, and finally we will introduce a library
called Vuex to handle the caching and state of the app. The app will have shareable URLs
and retrieve the contents of the folder passed in via the # URL parameter.
This kind of app would be useful if you wanted to give users access to the contents of your
Dropbox without giving out a username and password. Be warned, however, a tech-savvy
user could find your API key in the code and abuse it, so don't publish this code to the
World Wide Web.
This chapter is going to cover:
Loading and querying the Dropbox API
Listing the directories and files from your Dropbox account
Adding a loading state to your app
Using Vue animations
You will need a Dropbox account to follow these next few chapters. If you don't have one,
sign up and add a few dummy files and folders. The contents of the Dropbox don't matter,
but having folders to navigate through will help with understanding the code.