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

console.log(response.entries);

this.structure = response.entries;

})

.catch(error => {

console.log(error);

});

}

Inspecting the results from this new API call will reveal the media_info key for videos and

images. Expanding this will reveal several more pieces of information about the file, for

example, dimensions. If you want to add these, you will need to check that the
media_info object exists before displaying the information:

<li>

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

<span v-if="f.size"> - {{ bytesToSize(f.size) }}

</span> -

<span v-if="f.media_info">

[

{{ f.media_info.metadata.dimensions.width }}px x

{{ f.media_info.metadata.dimensions.height }}px

]

</span>

</li>

Try updating the path when retrieving the data from Dropbox. For example, if you have a

folder called images, change the this.getFolderStructure parameter to /images. If

you're not sure what the path is, analyze the data in the JavaScript console and copy the

value of the path_lower attribute of a folder, for example:

created() {

this.getFolderStructure('/images');

}

Formatting the file sizes

With the file size being output in plain bytes it can be quite hard for a user to dechiper. To
combat this, we can add a formatting method to output a file size which is more user-

friendly, for example displaying 1kb instead of 1024.

First, create a new key on the data object that contains an array of units called byteSizes:

data() {

return {

accessToken: 'XXXX',