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

(singke) #1
Pre-Caching Other Folders and Files for Faster Navigation Chapter 7

// Set a default
let output = '0 Byte';
// If the bytes are bigger than 0
if (bytes > 0) {
// Divide by 1024 and make an int
let i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
// Round to 2 decimal places and select the appropriate unit from
the array
output = Math.round(bytes / Math.pow(1024, i), 2) + ' ' +
this.byteSizes[i];
}
return output
}
},
created() {
// If the download link has be retrieved from the API, use it
// if not, aquery the API
if(this.f.download_link) {
this.link = this.f.download_link;
} else {
this.d.filesGetTemporaryLink({path: this.f.path_lower})
.then(data => {
this.f.download_link = this.link = data.link;
});
}
}
});

Now we take a look at the dropbox-viewer component:


/**
* The dropbox component
* @example <dropbox-viewer></dropbox-viewer>
*/
Vue.component('dropbox-viewer', {
template: '#dropbox-viewer-template',
data() {
return {
// Dropbox API token
accessToken: 'XXXX',

// Current folder structure
structure: {},
isLoading: true
}
},
computed: {
// The current folder path
Free download pdf