hook multifile to ui

app/templates/uploadedFile/index.js

@@ -0,0 +1,64 @@
+const html = require('choo/html');
+const assets = require('../../../common/assets');
+const bytes = require('../../utils').bytes;
+const fileIcon = require('../fileIcon');
+
+module.exports = function(file, state, emit) {
+  const transfer = state.transfer;
+  const transferState = transfer ? transfer.state : null;
+  const transferring = state.uploading || state.downloading;
+  const share = state.route.includes('share/');
+  const complete = share ? 'uploadedFile--completed' : '';
+
+  const cancelVisible =
+    transferring || state.route === '/' ? 'uploadedFile__cancel--visible' : '';
+
+  const stampClass =
+    share || transferState === 'complete' ? 'uploadedFile__stamp--visible' : '';
+
+  function cancel(event) {
+    event.preventDefault();
+    const btn = document.querySelector('.uploadedFile__cancel');
+    btn.disabled = true;
+    if (transferring) {
+      emit('cancel');
+    } else if (state.route === '/') {
+      emit('removeUpload', { file });
+    }
+  }
+
+  //const percent = share ? 100 : Math.floor(progressRatio * 100);
+  /*
+    style="
+    background: linear-gradient(to right, 
+    #e8f2fe 0%, 
+    #e8f2fe ${percent}%,
+    #fff ${percent}%,
+    #fff 100%);"
+  */
+
+  return html`
+    <li class="uploadedFile ${complete}" id="${file.id}" 
+    >
+
+      ${fileIcon(file.name, file._hasPassword)}
+
+      <div class="uploadedFile__cancel ${cancelVisible}"
+      onclick=${cancel}>
+        <img
+        src="${assets.get('close-16.svg')}"
+        alt="cancel"/>
+      </div>
+
+      <div class="uploadedFile__fileData">
+        <p class="uploadedFile__fileName">${file.name}</p>
+        <p class="uploadedFile__fileInfo">
+          <span>${bytes(file.size)}</span>
+        </p>
+      </div>
+
+      <img src="${assets.get('sent-done.svg')}"
+           class="uploadedFile__stamp ${stampClass}"/> 
+    </li>
+  `;
+};