Navigating through the File Tree and Loading Folders from the URL Chapter 5
Vue.component('folder', {
template: '<li><strong><a :href="\'#\' +
f.path_lower">{{ f.name }}</a></strong></li>',
props: {
f: Object
}
});
Vue.component('file', {
template: '<li><strong>{{ f.name }}</strong><span
v-if="f.size"> - {{ bytesToSize(f.size) }}</span>
<span v-if="link"> - <a :href="link">Download</a>
</span></li>',
props: {
f: Object,
d: Object
},
data() {
return {
byteSizes: ['Bytes', 'KB', 'MB', 'GB', 'TB'],
link: false
}
},
methods: {
bytesToSize(bytes) {
// 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() {
this.d.filesGetTemporaryLink({path:
this.f.path_lower}).then(data => {
this.link = data.link;
});
},
});
Vue.component('dropbox-viewer', {
template: '#dropbox-viewer-template',