Handling js upload files and displayling list of files by vue component.

assets/js/pages/files.vue

@@ -1,24 +1,58 @@
 <template>
   <div>
+    <h1>Files</h1>
 
-  <h1>hello {{ world }}</h1>
-    <MessageComponent></MessageComponent>
+    <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" class="link-danger">remove</a></td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 
 <script>
-import MessageComponent from "../components/message";
 import axios from 'axios';
 
 export default {
   name: 'Files',
-  components: {MessageComponent},
   data() {
     return {
-      world: "świecie 2"
+      files: []
     }
   },
   mounted() {
+    this.getFiles();
+  },
+  methods: {
+    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(document.URL + '/files').then(response => this.files = response.data)
+    }
   }
 }
 </script>