69 lines
1.7 KiB
Vue
69 lines
1.7 KiB
Vue
<template>
|
|
<div>
|
|
<h1>Files</h1>
|
|
|
|
<div v-if="files.length">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Id</th>
|
|
<th>File name</th>
|
|
<th class="text-end">File size</th>
|
|
<th>Extension</th>
|
|
<th>Download</th>
|
|
<th>Remove</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="file in files">
|
|
<td>{{ file.id }}</td>
|
|
<td>{{ file.fileName }}</td>
|
|
<td class="text-end">{{ formatSize(file.fileSize) }}</td>
|
|
<td>{{ file.extension }}</td>
|
|
<td><a :href="'/file/'+ file.id" class="link-secondary">download</a></td>
|
|
<td><a :href="'/file/delete/'+file.id" @click.prevent="deleteFile(file.id)" class="link-danger">remove</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios';
|
|
import {EventBus} from "../event-bus";
|
|
|
|
export default {
|
|
name: 'Files',
|
|
components: {
|
|
EventBus
|
|
},
|
|
data() {
|
|
return {
|
|
files: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getFiles();
|
|
},
|
|
created() {
|
|
window.EventBus.$on('fileUploaded', this.getFiles);
|
|
},
|
|
methods: {
|
|
deleteFile: function (fileId) {
|
|
axios.get(window.location.origin + '/file/delete/' + fileId).then(() => this.getFiles())
|
|
},
|
|
formatSize: function (bytes) {
|
|
if (bytes === 0) {
|
|
return "0.00 B";
|
|
}
|
|
var e = Math.floor(Math.log(bytes) / Math.log(1024));
|
|
return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
|
|
},
|
|
getFiles: function () {
|
|
axios.get(window.location.href.replace(window.location.hash, '') + '/files').then(response => this.files = response.data)
|
|
}
|
|
}
|
|
}
|
|
</script> |