3 files changed, 56 insertions, 8 deletions
diff --git a/src/main/resources/css/files.css b/src/main/resources/css/files.css
index 798e3ec..3ca6792 100644
--- a/src/main/resources/css/files.css
+++ b/src/main/resources/css/files.css
@@ -1,3 +1,19 @@
+table {
+    width: 100%;
+}
+
+table, td, th {
+    vertical-align: middle;
+    border-spacing: 0;
+    white-space: nowrap;
+}
+
+table th, table td {
+    padding: 10px;
+    border-bottom: 1px solid gray;
+    text-align: center;
+}
+
 a.filename {
     color: black;
     text-decoration: none;
diff --git a/src/main/resources/js/files.js b/src/main/resources/js/files.js
index 24140b0..3cdf4fd 100644
--- a/src/main/resources/js/files.js
+++ b/src/main/resources/js/files.js
@@ -22,10 +22,24 @@ drop.addEventListener('drop', e => {
         let request = new XMLHttpRequest();
         let formData = new FormData();
 
-        drop.insertAdjacentHTML('beforeend', `<a class="filename" href="${files[i].name}">${files[i].name}</a><br><hr>`);
+        // TODO: Consider using current date due to updated lastModified state at upload
+        const date = new Date(files[i].lastModified);
+        const lastModified = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+
+        const row = document.getElementById("table").insertRow(-1);
+        row.insertCell(0).innerHTML = `<a class="filename" href="${files[i].name}">${files[i].name}</a>`;
+        row.insertCell(1).innerHTML = `<a class="filename" href="${files[i].name}">${bytesToSize(files[i].size)}</a>`;
+        row.insertCell(2).innerHTML = `<a class="filename" href="${files[i].name}">${lastModified}</a>`;
 
         formData.append("file", files[i]);
         request.open("POST", "/upload/" + path);
         request.send(formData);
     }
+
+    function bytesToSize(bytes) {
+        const sizes = ['B', 'KiB', 'MiB', 'GiB', 'TiB'];
+        if (bytes === 0) return '0 Byte';
+        const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
+        return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
+    }
 });
diff --git a/src/main/resources/views/files.rocker.html b/src/main/resources/views/files.rocker.html
index f9852f8..2c4a7ff 100644
--- a/src/main/resources/views/files.rocker.html
+++ b/src/main/resources/views/files.rocker.html
@@ -12,12 +12,30 @@
 
 @layout.template(files.size() + " Files", css, js) -> {
 <div class="drop" id="drop">
-    <h1>/@path</h1>
-    <a class="filename" href="../">../</a><br>
-    <hr>
-    @for (String file : files) {
-    <a class="filename" href="@file">@file</a><br>
-    <hr>
-    }
+    <h2>/@path</h2>
+    <table id="table">
+        <thead>
+        <tr>
+            <th>Name</th>
+            <th>Size</th>
+            <th>Last modified</th>
+        </tr>
+        </thead>
+
+        <tbody>
+        <tr>
+            <td><a class="filename" href="../">../</a></td>
+            <td><a class="filename" href="../"></a></td>
+            <td><a class="filename" href="../"></a></td>
+        </tr>
+        @for (String[] fileArray : files) {
+        <tr>
+            <td><a class="filename" href="@fileArray[0]">@fileArray[0]</a></td>
+            <td><a class="filename" href="@fileArray[0]">@fileArray[1]</a></td>
+            <td><a class="filename" href="@fileArray[0]">@fileArray[2]</a></td>
+        </tr>
+        }
+        </tbody>
+    </table>
 </div>
 }