Merge pull request #134 from mozilla/ui

Load previous uploads

frontend/src/download.js

@@ -4,7 +4,6 @@ const $ = require('jquery');
 
 const Raven = window.Raven;
 
-
 $(document).ready(function() {
   $('#download-progress').hide();
   $('#send-file').click(() => {

frontend/src/fileReceiver.js

@@ -64,26 +64,26 @@ class FileReceiver extends EventEmitter {
         ['encrypt', 'decrypt']
       )
     ])
-    .then(([fdata, key]) => {
+      .then(([fdata, key]) => {
-      const salt = this.salt;
+        const salt = this.salt;
-      return Promise.all([
+        return Promise.all([
-        window.crypto.subtle.decrypt(
+          window.crypto.subtle.decrypt(
-          {
+            {
-            name: 'AES-CBC',
+              name: 'AES-CBC',
-            iv: salt
+              iv: salt
-          },
+            },
-          key,
+            key,
-          fdata.data
+            fdata.data
-        ),
+          ),
-        new Promise((resolve, reject) => {
+          new Promise((resolve, reject) => {
-          resolve(fdata.fname);
+            resolve(fdata.fname);
-        })
+          })
-      ]);
+        ]);
-    })
+      })
-    .catch(err => {
+      .catch(err => {
-      Raven.captureException(err);
+        Raven.captureException(err);
-      return Promise.reject(err);
+        return Promise.reject(err);
-    });
+      });
   }
 }
 

frontend/src/fileSender.js

@@ -66,10 +66,6 @@ class FileSender extends EventEmitter {
           window.crypto.subtle.exportKey('jwk', secretKey)
         ]);
       })
-      .catch(err => { 
-        Raven.captureException(err) 
-        return Promise.reject(err);
-      })
       .then(([encrypted, keydata]) => {
         return new Promise((resolve, reject) => {
           const file = this.file;
@@ -107,7 +103,7 @@ class FileSender extends EventEmitter {
         });
       })
       .catch(err => {
-        Raven.captureException(err) 
+        Raven.captureException(err);
         return Promise.reject(err);
       });
   }

frontend/src/upload.js

@@ -2,8 +2,6 @@ const FileSender = require('./fileSender');
 const { notify } = require('./utils');
 const $ = require('jquery');
 
-const Raven = window.Raven;
-
 $(document).ready(function() {
   // reset copy button
   const $copyBtn = $('#copy-btn');
@@ -11,10 +9,15 @@ $(document).ready(function() {
   $copyBtn.html('Copy');
 
   $('#page-one').show();
-  $('#file-list').hide();
+  $('#file-list').show();
   $('#upload-progress').hide();
   $('#share-link').hide();
 
+  for (let i = 0; i < localStorage.length; i++) {
+    const id = localStorage.key(i);
+    populateFileList(localStorage.getItem(id));
+  }
+
   // copy link to clipboard
   $copyBtn.click(() => {
     const aux = document.createElement('input');
@@ -52,7 +55,52 @@ $(document).ready(function() {
       file = event.target.files[0];
     }
 
-    const $fileList = $('#uploaded-files');
+    const fileSender = new FileSender(file);
+    fileSender.on('progress', percentComplete => {
+      $('#page-one').hide();
+      $('#file-list').hide();
+      $('#upload-progress').show();
+      $('#upload-filename').innerHTML += file.name;
+      // update progress bar
+      document
+        .querySelector('#progress-bar')
+        .style.setProperty('--progress', percentComplete + '%');
+      $('#progress-text').html(`${percentComplete}%`);
+    });
+    fileSender.upload().then(info => {
+      const url = info.url.trim() + `#${info.secretKey}`.trim();
+      $('#link').attr('value', url);
+      const fileData = {
+        name: file.name,
+        fileId: info.fileId,
+        url: info.url,
+        secretKey: info.secretKey,
+        deleteToken: info.deleteToken
+      };
+      localStorage.setItem(info.fileId, JSON.stringify(fileData));
+
+      $('#page-one').hide();
+      $('#file-list').hide();
+      $('#upload-progress').hide();
+      $('#share-link').show();
+
+      populateFileList(JSON.stringify(fileData));
+      notify('Your upload has finished.');
+    });
+  };
+
+  window.allowDrop = function(ev) {
+    ev.preventDefault();
+  };
+
+  //update file table with current files in localStorage
+  function populateFileList(file) {
+    try {
+      file = JSON.parse(file);
+    } catch (e) {
+      return;
+    }
+
     const row = document.createElement('tr');
     const name = document.createElement('td');
     const link = document.createElement('td');
@@ -69,6 +117,7 @@ $(document).ready(function() {
     // create delete button
     btn.innerHTML = 'x';
     btn.classList.add('delete-btn');
+    link.innerHTML = file.url.trim() + `#${file.secretKey}`.trim();
 
     // create popup
     popupDiv.classList.add('popup');
@@ -76,6 +125,14 @@ $(document).ready(function() {
       '<span class="del-file">Delete</span><span class="nvm" > Nevermind</span>'
     );
 
+    // delete file
+    $popupText.find('.del-file').click(e => {
+      FileSender.delete(file.fileId, file.deleteToken).then(() => {
+        $(e.target).parents('tr').remove();
+        localStorage.removeItem(file.fileId);
+      });
+    });
+
     // add data cells to table row
     row.appendChild(name);
     row.appendChild(link);
@@ -85,64 +142,21 @@ $(document).ready(function() {
     del.appendChild(popupDiv);
     row.appendChild(del);
 
-    const fileSender = new FileSender(file);
+    // show popup
-    fileSender.on('progress', percentComplete => {
+    del.addEventListener('click', toggleShow);
-      $('#page-one').hide();
+    // hide popup
-      $('#file-list').hide();
+    $popupText.find('.nvm').click(function(e) {
-      $('#upload-progress').show();
+      e.stopPropagation();
-      $('#upload-filename').innerHTML += file.name;
+      toggleShow();
-      // update progress bar
-      document
-        .querySelector('#progress-bar')
-        .style.setProperty('--progress', percentComplete + '%');
-      $('#progress-text').html(`${percentComplete}%`);
-      if (percentComplete === 100) {
-        notify('Your upload has finished.');
-      }
     });
-    fileSender.upload().then(info => {
+    $popupText.click(function(e) {
-      const url = info.url.trim() + `#${info.secretKey}`.trim();
+      e.stopPropagation();
-      $('#link').attr('value', url);
-      link.innerHTML = url;
-      localStorage.setItem(info.fileId, info.deleteToken);
-
-      // delete file
-      $popupText.find('.del-file').click(e => {
-        FileSender.delete(
-          info.fileId,
-          localStorage.getItem(info.fileId)
-        ).then(() => {
-          $(e.target).parents('tr').remove();
-          localStorage.removeItem(info.fileId);
-        })
-        .catch(err => { 
-          Raven.captureException(err);
-          return Promise.reject(err);
-        });
-      });
-
-      // show popup
-      del.addEventListener('click', toggleShow);
-      // hide popup
-      $popupText.find('.nvm').click(toggleShow);
-
-      $fileList.append(row); //add row to table
-      $('#page-one').hide();
-      $('#file-list').hide();
-      $('#upload-progress').hide();
-      $('#share-link').show();
-    })
-    .catch(err => {
-      Raven.captureException(err);
-      return Promise.reject(err);
     });
 
+    $('tbody').append(row); //add row to table
+
     function toggleShow() {
       $popupText.toggleClass('show');
     }
-  };
+  }
-
-  window.allowDrop = function(ev) {
-    ev.preventDefault();
-  };
 });

package-lock.json

@@ -198,9 +198,9 @@
       "dev": true
     },
     "aws-sdk": {
-      "version": "2.76.0",
+      "version": "2.77.0",
-      "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.76.0.tgz",
+      "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.77.0.tgz",
-      "integrity": "sha1-LDe/BON6tKJrX/fHWD1ZYDTHYwk="
+      "integrity": "sha1-gJCQu4dNj0//ysUxZilYdjjnhlw="
     },
     "babel-code-frame": {
       "version": "6.22.0",

server/config.js

@@ -24,7 +24,8 @@ const conf = convict({
   },
   sentry_id: {
     format: String,
-    default: 'https://cdf9a4f43a584f759586af8ceb2194f2@sentry.prod.mozaws.net/238',
+    default:
+      'https://cdf9a4f43a584f759586af8ceb2194f2@sentry.prod.mozaws.net/238',
     env: 'P2P_SENTRY_CLIENT'
   },
   sentry_dsn: {

server/portal_server.js

@@ -45,9 +45,12 @@ app.get('/', (req, res) => {
 
 app.get('/exists/:id', (req, res) => {
   const id = req.params.id;
-  storage.exists(id).then(() => {
+  storage
-    res.sendStatus(200);
+    .exists(id)
-  }).catch(err => res.sendStatus(404));
+    .then(() => {
+      res.sendStatus(200);
+    })
+    .catch(err => res.sendStatus(404));
 });
 
 app.get('/download/:id', (req, res) => {

test/local.storage.test.js

@@ -44,16 +44,18 @@ const storage = proxyquire('../server/storage', {
 describe('Testing Exists from local filesystem', function() {
   it('Exists returns true when file exists', function() {
     exists.callsArgWith(1, null, 1);
-    return storage.exists('test')
+    return storage
-                  .then(() => assert(1))
+      .exists('test')
-                  .catch(err => assert.fail())
+      .then(() => assert(1))
+      .catch(err => assert.fail());
   });
 
   it('Exists returns false when file does not exist', function() {
     exists.callsArgWith(1, null, 0);
-    return storage.exists('test')
+    return storage
-                  .then(() => assert.fail())
+      .exists('test')
-                  .catch(err => assert(1))
+      .then(() => assert.fail())
+      .catch(err => assert(1));
   });
 });
 

views/index.handlebars

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