Navigating through the File Tree and Loading Folders from the URL Chapter 5Separating out files and folders
Before we create the components, we need to separate our files and folders in our structure,
so we can easily identify and display our different types. Thanks to the .tag attribute on
each item, we can split up our folders and files.
First, we need to update our structure data property to be an object containing both
the files and the folders array:
data() {
return {
accessToken: 'XXXX',
structure: {
files: [],
folders: []
},
byteSizes: ['Bytes', 'KB', 'MB', 'GB', 'TB'],
isLoading: true
}
}This gives us the ability to append our files and folders to different arrays, meaning we can
display them differently in our view.
The next step is to populate these arrays with the data of the current folder. All the
following code takes place in the first then() function of
the getFolderStructure method.
Create a JavaScript loop to cycle through the entries and check the .tag property of the
item. If it is equal to folder, append it to the structure.folder array, otherwise, add it
to the structure.files array:
getFolderStructure(path) {
this.dropbox().filesListFolder({
path: path,
include_media_info: true
})
.then(response => {
for (let entry of response.entries) {
// Check ".tag" prop for type
if(entry['.tag'] === 'folder') {
this.structure.folders.push(entry);
} else {
this.structure.files.push(entry);
}
}