hide table header on empty list

frontend/src/upload.js

@@ -13,10 +13,14 @@ $(document).ready(function() {
   $('#upload-progress').hide();
   $('#share-link').hide();
 
-  for (let i = 0; i < localStorage.length; i++) {
+  if (localStorage.length === 0) {
-    const id = localStorage.key(i);
+    toggleHeader();
-    //check if file exists before adding to list
+  } else {
-    checkExistence(id, true);
+    for (let i = 0; i < localStorage.length; i++) {
+      const id = localStorage.key(i);
+      //check if file exists before adding to list
+      checkExistence(id, true);
+    }
   }
 
   // copy link to clipboard
@@ -55,7 +59,7 @@ $(document).ready(function() {
     } else {
       file = event.target.files[0];
     }
-    const expiration = 2 * 60 * 1000; //will eventually come from a field
+    const expiration = 24 * 60 * 60 * 1000; //will eventually come from a field
 
     const fileSender = new FileSender(file);
     fileSender.on('progress', percentComplete => {
@@ -196,6 +200,7 @@ $(document).ready(function() {
       FileSender.delete(file.fileId, file.deleteToken).then(() => {
         $(e.target).parents('tr').remove();
         localStorage.removeItem(file.fileId);
+        toggleHeader();
       });
     });
 
@@ -224,5 +229,14 @@ $(document).ready(function() {
     function toggleShow() {
       $popupText.toggleClass('show');
     }
+    toggleHeader();
+  }
+  function toggleHeader() {
+    //hide table header if empty list
+    if (document.querySelector('tbody').childNodes.length === 1) {
+      $('#file-list').hide();
+    } else {
+      $('#file-list').show();
+    }
   }
 });

views/index.handlebars

@@ -36,24 +36,23 @@
           </div>
         </div>
       </div>
-    </div>
+      <div id="file-list">
+        <table id="uploaded-files">
+          <thead>
+            <tr>
+              <!-- htmllint attr-bans="false" -->
+              <th width="30%">File</th>
+              <th width="45%">Copy URL</th>
+              <th width="18%">Expires in</th>
+              <th width="7%">Delete</th>
+              <!-- htmllint tag-bans="$previous" -->
+            </tr>
+          </thead>
+          <tbody>
 
-    <div id="file-list">
+          </tbody>
-      <table id="uploaded-files">
+        </table>
-        <thead>
+      </div>
-          <tr>
-            <!-- htmllint attr-bans="false" -->
-            <th width="30%">File</th>
-            <th width="45%">Copy URL</th>
-            <th width="18%">Expires in</th>
-            <th width="7%">Delete</th>
-            <!-- htmllint tag-bans="$previous" -->
-          </tr>
-        </thead>
-        <tbody>
-
-        </tbody>
-      </table>
     </div>
 
     <div id="upload-progress">