3 files changed, 35 insertions, 11 deletions

diff --git a/src/main/resources/css/files.css b/src/main/resources/css/files.css
index 9037d3a..2b8e510 100644
--- a/src/main/resources/css/files.css
+++ b/src/main/resources/css/files.css
@@ -12,6 +12,12 @@
     color: inherit;
 }
 
+.progress {
+    display: none;
+    color: green;
+    float: right;
+}
+
 table {
     table-layout: fixed;
     width: 100%;
diff --git a/src/main/resources/js/files.js b/src/main/resources/js/files.js
index 00015c4..9c8c135 100644
--- a/src/main/resources/js/files.js
+++ b/src/main/resources/js/files.js
@@ -43,15 +43,34 @@ drop.addEventListener('drop', e => {
         setListeners();
 
         iterateFiles(item, files => {
+            const progress = document.getElementById("progress");
             const request = new XMLHttpRequest();
             const formData = new FormData();
 
             for (const file of files)
                 formData.append('file', file);
 
+            request.upload.onprogress = e => {
+                if (e.lengthComputable) {
+                    progress.style.display = "block";
+                    progress.innerText = `Uploading ${files.length} file(s): ${(e.loaded / e.total * 100).toFixed(2)}%`;
+                }
+            };
+
+            request.onreadystatechange = () => {
+                if (request.readyState === 4) {
+                    if (request.status === 200) {
+                        progress.innerText = "Finished uploading!";
+                        setTimeout(() => progress.style.display = "none", 3000)
+                    } else {
+                        progress.style.color = "red";
+                        progress.innerText = "An error occurred :(";
+                    }
+                }
+            };
+
             request.open('POST', `/upload/${path}`.clean(), true);
             request.send(formData);
-
         });
     }
 
@@ -212,16 +231,14 @@ setListeners();
 
 /**
  * Iterates over files and directories
+ * TODO: Add empty directory upload support
  * @param item
  * @param callback
  */
-// TODO: Add empty directory upload support
-const files = [];
-
 function iterateFiles(item, callback) {
+    const files = [];
     console.log(item);
     (function iterate(subItem) {
-        console.log(subItem);
         if (subItem.isDirectory) {
             const directoryReader = subItem.createReader();
             directoryReader.readEntries(entries => {
@@ -233,7 +250,6 @@ function iterateFiles(item, callback) {
         } else
             subItem.file(file => {
                 const newName = subItem.fullPath.charAt(0) === '/' ? subItem.fullPath.substr(1) : subItem.fullPath;
-                console.log(newName);
                 files.push(new File([file], newName, {
                     lastModified: file.lastModified,
                     lastModifiedDate: file.lastModifiedDate,
diff --git a/src/main/resources/views/files.rocker.html b/src/main/resources/views/files.rocker.html
index 2392928..1bdf858 100644
--- a/src/main/resources/views/files.rocker.html
+++ b/src/main/resources/views/files.rocker.html
@@ -18,25 +18,27 @@
 @layout.template(files.size() + " Files", ctx, css, js) -> {
 <div class="drop" id="drop">
     <h3 class="navigation">
+        @if (!isShared) {
         <a href="/"><i class="icon ion-md-home"></i></a>
         <a href="/files/">Files</a>
 
         @if (!path.isEmpty()) {
-        <i class='icon ion-ios-arrow-forward'></i>
+        <i class="icon ion-ios-arrow-forward"></i>
         }
-
-        @if (!isShared) {
         @for (int i = 0; i < path.split("/").length - 1; i++) {
         <a href='@(new String(new char[path.split("/").length - i - 1]).replace("\0", "../"))'>@path.split("/")[i]</a>
-        <i class='icon ion-ios-arrow-forward'></i>
+        <i class="icon ion-ios-arrow-forward"></i>
         }
         @if (path.split("/").length > 0) {
-        <!-- TEST 2 -->
         <a href="">@(path.split("/")[path.split("/").length - 1])</a>
         }
         } else { <!-- is shared -->
+        <a href="/"><i class="icon ion-md-home"></i></a>
+        <a href="">Shared</a>
+        <i class="icon ion-ios-arrow-forward"></i>
         <a href="">@(path.split("/")[path.split("/").length - 1])</a>
         }
+        <span class="progress" id="progress"></span>
     </h3>
 
     <table id="table">