Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Getting a List of Files Using the Dropbox API Chapter 4

The first property, .tag, helps us identify whether the item is a file or a folder. Both types

then have the following properties in common:

id: A unique identifier to Dropbox

name: The name of the file or folder, irrespective of where the item is

path_display: The full path of the item with the case matching that of the files

and folders

path_lower: Same as path_display but all lowercase

Items with a .tag of a file also contain several more fields for us to display:

client_modified: This is the date when the file was added to Dropbox.

content_hash: A hash of the file, used for identifying whether it is different

from a local or remote copy. More can be read about this on the Dropbox

website.

rev: A unique identifier of the version of the file.

server_modified: The last time the file was modified on Dropbox.

size: The size of the file in bytes.

To begin with, we are going to display the name of the item and the size, if present. Update

the list item to show these properties:

<li v-for="entry in structure">

<strong>{{ entry.name }}</strong>

<span v-if="entry.size"> - {{ entry.size }}</span>

</li>

More file meta information

To make our file and folder view a bit more useful, we can add more rich content and
metadata to files such as images. These details are available by enabling

the include_media_info option in the Dropbox API.

Head back to your getFolderStructure method and add the parameter after path. Here

are some new lines of readability:

getFolderStructure(path) {

this.dropbox().filesListFolder({

path: path,

include_media_info: true

})

.then(response => {