Navigating through the File Tree and Loading Folders from the URL Chapter 5We now need to make a variable available to us that stores the current folder path. We can
then manipulate this variable within the breadcrumb component. This will be stored and
updated on the Dropbox component and passed down to the breadcrumb component.
Create a new property called path on the dropbox-viewer component:
data() {
return {
accessToken: 'XXXXX',
structure: {},
isLoading: true,
path: ''
}
}We now need to ensure this path gets updated whenever the structure is retrieved from the
Dropbox API. Do this within the getFolderStructure method, just before the
isLoading variable is disabled. This ensures it only gets updated once the structure has
been loaded, but before the files and folders are displayed:
getFolderStructure(path) {
this.dropbox().filesListFolder({
path: path,
include_media_info: true
})
.then(response => {
const structure = {
folders: [],
files: []
}
for (let entry of response.entries) {
// Check ".tag" prop for type
if(entry['.tag'] == 'folder') {
structure.folders.push(entry);
} else {
structure.files.push(entry);
}
}
this.path = path;
this.structure = structure;
this.isLoading = false;
})
.catch(error => {
console.log(error);
});
},