show download Limits on page

app/fileManager.js

@@ -36,22 +36,16 @@ function openLinksInNewTab(links, should = true) {
   return links;
 }
 
-function exists(id) {
-  return new Promise((resolve, reject) => {
-    const xhr = new XMLHttpRequest();
-    xhr.onreadystatechange = () => {
-      if (xhr.readyState === XMLHttpRequest.HEADERS_RECEIVED) {
-        resolve(xhr.status === 200);
+async function getDLCounts(file) {
+  const url = `/api/metadata/${file.id}`;
+  const receiver = new FileReceiver(url, file);
+  try {
+    await receiver.getMetadata(file.nonce);
+    return receiver.file;
+  } catch (e) {
+    if (e.message === '404') return false;
   }
-    };
-    xhr.onerror = () => resolve(false);
-    xhr.ontimeout = () => resolve(false);
-    xhr.open('get', '/api/exists/' + id);
-    xhr.timeout = 2000;
-    xhr.send();
-  });
 }
-
 export default function(state, emitter) {
   let lastRender = 0;
   let updateTitle = false;
@@ -64,10 +58,17 @@ export default function(state, emitter) {
     const files = state.storage.files;
     let rerender = false;
     for (const file of files) {
-      const ok = await exists(file.id);
-      if (!ok) {
+      const oldLimit = file.dlimit;
+      const oldTotal = file.dtotal;
+      const receivedFile = await getDLCounts(file);
+      if (!receivedFile) {
         state.storage.remove(file.id);
         rerender = true;
+      } else if (
+        oldLimit !== receivedFile.dlimit ||
+        oldTotal !== receivedFile.dtotal
+      ) {
+        rerender = true;
       }
     }
     if (rerender) {

app/templates/file.js

@@ -15,7 +15,9 @@ function timeLeft(milliseconds) {
 
 module.exports = function(file, state, emit) {
   const ttl = file.expiresAt - Date.now();
-  const remaining = timeLeft(ttl) || state.translate('linkExpiredAlt');
+  const remainingTime = timeLeft(ttl) || state.translate('linkExpiredAlt');
+  const downloadLimit = file.dlimit || 1;
+  const totalDownloads = file.dtotal || 0;
   const row = html`
   <tr id="${file.id}">
     <td class="overflow-col" title="${
@@ -29,7 +31,8 @@ module.exports = function(file, state, emit) {
         'copiedUrl'
       )}</span>
     </td>
-    <td>${remaining}</td>
+    <td>${remainingTime}</td>
+    <td class="center-col">${totalDownloads}/${downloadLimit}</td>
     <td class="center-col">
       <img onclick=${showPopup} src="${assets.get(
     'close-16.svg'

app/templates/fileList.js

@@ -12,7 +12,12 @@ module.exports = function(state, emit) {
           <th id="copy-file-list" class="center-col">${state.translate(
             'copyFileList'
           )}</th>
-          <th id="expiry-file-list">${state.translate('expiryFileList')}</th>
+          <th id="expiry-time-file-list" >${state.translate(
+            'timeFileList'
+          )}</th>
+          <th id="expiry-downloads-file-list" >${state.translate(
+            'downloadsFileList'
+          )}</th>
           <th id="delete-file-list" class="center-col">${state.translate(
             'deleteFileList'
           )}</th>

assets/main.css

@@ -342,10 +342,14 @@ tbody {
   width: 25%;
 }
 
-#expiry-file-list {
+#expiry-time-file-list {
   width: 21%;
 }
 
+#expiry-downloads-file-list {
+  width: 8%;
+}
+
 #delete-file-list {
   width: 12%;
 }

public/locales/en-US/send.ftl

@@ -41,6 +41,8 @@ deleteFileButton = Delete file
 sendAnotherFileLink = Send another file
 // Alternative text used on the download link/button (indicates an action).
 downloadAltText = Download
+downloadsFileList = Downloads
+timeFileList = Time
 downloadFileName = Download { $filename }
 downloadFileSize = ({ $size })
 unlockInputLabel = Enter Password