some wip. still broken

app/templates/fileManager/fileManager.css

@@ -0,0 +1,101 @@
+.fileManager {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.uploadArea {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  overflow: scroll;
+  transition: transform 150ms;
+  flex: 1;
+  min-height: 90px;
+}
+
+.uploadArea__msg {
+  font-size: 15px;
+  color: var(--lightTextColor);
+  margin: 12px 0 0;
+  font-family: 'SF Pro Text', sans-serif;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+.uploadArea__clickMsg {
+  font-style: italic;
+  font-size: 12px;
+  line-height: 12px;
+  color: var(--lightTextColor);
+  margin: 5px;
+}
+
+.uploadArea--dragging {
+  border: 1px dashed rgba(12, 12, 13, 0.4);
+  transform: scale(1.04);
+}
+
+.uploadArea--faded * {
+  opacity: 0.5;
+}
+
+.uploadArea--noEvents,
+.uploadArea--noEvents * {
+  pointer-events: none;
+}
+
+.btn--file {
+  background-color: #737373;
+}
+
+.btn--file:hover {
+  background-color: #636363;
+}
+
+.btn--hidden {
+  display: none;
+}
+
+.inputFile {
+  display: none;
+}
+
+.inputFile--focused + .btn--file {
+  background-color: var(--primaryControlHoverColor);
+  outline: 1px dotted #000;
+  outline: -webkit-focus-ring-color auto 5px;
+}
+
+.uploadArea > .uploadedFiles {
+  position: absolute;
+  top: 0;
+  left: 0;
+  flex: none;
+  height: 100%;
+  width: 100%;
+  border: none;
+  z-index: 1;
+}
+
+.uploadOptions {
+  text-align: left;
+  font-size: 13px;
+  color: var(--lightTextColor);
+  margin: 24px;
+}
+
+.uploadOptions--faded {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.uploadCancel {
+  margin: 6px 0 0;
+}
+
+.uploadCancel:hover {
+  text-decoration: underline;
+}

app/templates/fileManager/index.js

@@ -0,0 +1,129 @@
+const html = require('choo/html');
+const assets = require('../../../common/assets');
+const setPasswordSection = require('../setPasswordSection');
+const uploadBox = require('../uploadedFileList');
+const expireInfo = require('../expireInfo');
+
+module.exports = function(state, emit) {
+  const hasAnUpload = state.archive && state.archive.numFiles > 0;
+
+  const optionClass = state.uploading ? 'uploadOptions--faded' : '';
+  const btnUploading = state.uploading ? 'btn--stripes' : '';
+  const cancelVisible = state.uploading ? '' : 'noDisplay';
+  const faded = hasAnUpload ? 'noDisplay' : '';
+  const selectFileClass = hasAnUpload > 0 ? 'btn--hidden' : '';
+  const sendFileClass = hasAnUpload > 0 ? 'btn--file' : 'btn--hidden';
+
+  let btnText = '';
+
+  if (state.encrypting) {
+    btnText = state.translate('encryptingFile');
+  } else if (state.uploading) {
+    btnText = `sending...  ${Math.floor(state.transfer.progressRatio * 100)}%`;
+  } else {
+    //default pre-upload text
+    btnText = state.translate('uploadSuccessConfirmHeader');
+  }
+
+  return html`<div class="fileManager">
+    <label class="uploadArea"
+      ondragover=${dragover}
+      ondragleave=${dragleave}>
+
+      ${uploadBox(state.archive, state, emit)}
+
+      <div class="uploadedFilesWrapper ${faded}">
+        <img
+          src="${assets.get('addfile.svg')}"
+          title="${state.translate('uploadSvgAlt')}"/>
+        <div class="uploadArea__msg">
+          ${state.translate('uploadDropDragMessage')}
+        </div>
+
+        <span class="uploadArea__clickMsg">
+          ${state.translate('uploadDropClickMessage')}
+        </span>
+      </div>
+
+      <input id="file-upload"
+        class="inputFile fileBox"
+        type="file"
+        multiple
+        name="fileUploaded"
+        onfocus=${onfocus}
+        onblur=${onblur}
+        onchange=${addFiles} />
+
+    </label>
+
+    <div class="uploadOptions ${optionClass}">
+    ${expireInfo(state, emit)}
+    ${setPasswordSection(state)}
+    </div>
+
+    <label for="file-upload"
+      class="btn btn--file ${selectFileClass}"
+      title="${state.translate('uploadPageBrowseButton1')}">
+      ${state.translate('uploadPageBrowseButton1')}
+    </label>
+
+    <button
+      class="btn ${btnUploading} ${sendFileClass}"
+      onclick=${state.uploading ? noop : upload}
+      title="${btnText}">
+      ${btnText}
+    </button>
+
+    <button class="btn--cancel uploadCancel ${cancelVisible}"
+      onclick=${cancel}>
+      ${state.translate('uploadingPageCancel')}
+    </button>
+  </div>`;
+
+  function noop() {}
+
+  function dragover(event) {
+    const div = document.querySelector('.uploadArea');
+    div.classList.add('uploadArea--dragging');
+  }
+
+  function dragleave(event) {
+    const div = document.querySelector('.uploadArea');
+    div.classList.remove('uploadArea--dragging');
+  }
+
+  function onfocus(event) {
+    event.target.classList.add('inputFile--focused');
+  }
+
+  function onblur(event) {
+    event.target.classList.remove('inputFile--focused');
+  }
+
+  function cancel(event) {
+    if (state.uploading) {
+      emit('cancel');
+      const cancelBtn = document.querySelector('.uploadCancel');
+      cancelBtn.innerHTML = state.translate('uploadCancelNotification');
+    }
+  }
+
+  function addFiles(event) {
+    event.preventDefault();
+    const newFiles = Array.from(event.target.files);
+
+    emit('addFiles', { files: newFiles });
+  }
+
+  function upload(event) {
+    event.preventDefault();
+    event.target.disabled = true;
+    if (!state.uploading) {
+      emit('upload', {
+        type: 'click',
+        dlimit: state.downloadCount || 1,
+        password: state.password
+      });
+    }
+  }
+};