Merge pull request #39 from mozilla/refactor-riff

Refactor riff

.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+node_modules
+public/bundle.js
+static/*
+!static/info.txt

app.js

@@ -1,111 +0,0 @@
-const express = require('express');
-const busboy = require('connect-busboy');
-const path = require('path');
-const fs = require('fs-extra');
-const bodyParser = require('body-parser');
-const crypto = require('crypto');
-
-const app = express();
-const redis = require('redis'), client = redis.createClient();
-
-client.on('error', function(err) {
-  console.log(err);
-});
-
-app.use(busboy());
-app.use(bodyParser.json());
-app.use(express.static(path.join(__dirname, 'public')));
-
-app.get('/download/:id', function(req, res) {
-  res.sendFile(path.join(__dirname + '/public/download.html'));
-});
-
-app.get('/assets/download/:id', function(req, res) {
-  let id = req.params.id;
-  if (!validateID(id)) {
-    res.send(404);
-    return;
-  }
-
-  client.hget(id, 'filename', function(err, reply) {
-    // maybe some expiration logic too
-    if (!reply) {
-      res.sendStatus(404);
-    } else {
-      res.setHeader('Content-Disposition', 'attachment; filename=' + reply);
-      res.setHeader('Content-Type', 'application/octet-stream');
-
-      res.download(__dirname + '/static/' + id, reply, function(err) {
-        if (!err) {
-          client.del(id);
-          fs.unlinkSync(__dirname + '/static/' + id);
-        }
-      });
-    }
-  });
-});
-
-app.post('/delete/:id', function(req, res) {
-  let id = req.params.id;
-
-  if (!validateID(id)) {
-    res.send(404);
-    return;
-  }
-
-  let delete_token = req.body.delete_token;
-
-  if (!delete_token) {
-    res.sendStatus(404);
-  }
-
-  client.hget(id, 'delete', function(err, reply) {
-    if (!reply) {
-      res.sendStatus(404);
-    } else {
-      client.del(id);
-      fs.unlinkSync(__dirname + '/static/' + id);
-      res.sendStatus(200);
-    }
-  });
-});
-
-app.post('/upload/:id', function(req, res, next) {
-  if (!validateID(req.params.id)) {
-    res.send(404);
-    return;
-  }
-
-  var fstream;
-  req.pipe(req.busboy);
-  req.busboy.on('file', function(fieldname, file, filename) {
-    console.log('Uploading: ' + filename);
-
-    //Path where image will be uploaded
-    fstream = fs.createWriteStream(__dirname + '/static/' + req.params.id);
-    file.pipe(fstream);
-    fstream.on('close', function() {
-      let id = req.params.id;
-      let uuid = crypto.randomBytes(10).toString('hex');
-
-      client.hmset([id, 'filename', filename, 'delete', uuid]);
-
-      // delete the file off the server in 24 hours
-      // setTimeout(function() {
-      //   fs.unlinkSync(__dirname + "/static/" + id);
-      // }, 86400000);
-
-      client.expire(id, 86400000);
-      console.log('Upload Finished of ' + filename);
-      res.send(uuid);
-    });
-  });
-});
-
-app.listen(3000, function() {
-  console.log('Portal app listening on port 3000!');
-});
-
-function validateID(route_id) {
-  return route_id.match(/^[0-9a-fA-F]{32}$/) !== null;
-}

frontend/src/download.js

@@ -0,0 +1,45 @@
+const FileReceiver = require('./fileReceiver');
+
+let download = () => {
+  const fileReceiver = new FileReceiver();
+
+  let li = document.createElement('li');
+  let name = document.createElement('p');
+  li.appendChild(name);
+  let progress = document.createElement('p');
+  li.appendChild(progress);
+
+  document.getElementById('downloaded_files').appendChild(li);
+
+  fileReceiver.on('progress', percentComplete => {
+    progress.innerText = `Progress: ${percentComplete}%`;
+
+    if (percentComplete === 100) {
+      let finished = document.createElement('p');
+      finished.innerText = 'Your download has finished.';
+      li.appendChild(finished);
+
+      let close = document.createElement('button');
+      close.innerText = 'Ok';
+      close.addEventListener('click', () => {
+        document.getElementById('downloaded_files').removeChild(li);
+      });
+      li.appendChild(close);
+    }
+  });
+
+  fileReceiver.download().then(([decrypted, fname]) => {
+    name.innerText = fname;
+    let dataView = new DataView(decrypted);
+    let blob = new Blob([dataView]);
+    let downloadUrl = URL.createObjectURL(blob);
+
+    let a = document.createElement('a');
+    a.href = downloadUrl;
+    a.download = fname;
+    document.body.appendChild(a);
+    a.click();
+  });
+};
+
+window.download = download;

frontend/src/fileReceiver.js

@@ -0,0 +1,74 @@
+const EventEmitter = require('events');
+const { strToIv } = require('./utils');
+
+class FileReceiver extends EventEmitter {
+  constructor() {
+    super();
+    this.salt = strToIv(location.pathname.slice(10, -1));
+  }
+
+  download() {
+    return Promise.all([
+      new Promise((resolve, reject) => {
+        let xhr = new XMLHttpRequest();
+
+        xhr.onprogress = e => {
+          if (e.lengthComputable) {
+            let percentComplete = Math.floor(e.loaded / e.total * 100);
+            this.emit('progress', percentComplete);
+          }
+        };
+
+        xhr.onload = function(e) {
+          let blob = new Blob([this.response]);
+          let fileReader = new FileReader();
+          fileReader.onload = function() {
+            resolve({
+              data: this.result,
+              fname: xhr
+                .getResponseHeader('Content-Disposition')
+                .match(/filename="(.+)"/)[1]
+            });
+          };
+
+          fileReader.readAsArrayBuffer(blob);
+        };
+
+        xhr.open('get', '/assets' + location.pathname.slice(0, -1), true);
+        xhr.responseType = 'blob';
+        xhr.send();
+      }),
+      window.crypto.subtle.importKey(
+        'jwk',
+        {
+          kty: 'oct',
+          k: location.hash.slice(1),
+          alg: 'A128CBC',
+          ext: true
+        },
+        {
+          name: 'AES-CBC'
+        },
+        true,
+        ['encrypt', 'decrypt']
+      )
+    ]).then(([fdata, key]) => {
+      let salt = this.salt;
+      return Promise.all([
+        window.crypto.subtle.decrypt(
+          {
+            name: 'AES-CBC',
+            iv: salt
+          },
+          key,
+          fdata.data
+        ),
+        new Promise((resolve, reject) => {
+          resolve(fdata.fname);
+        })
+      ]);
+    });
+  }
+}
+
+module.exports = FileReceiver;

frontend/src/fileSender.js

@@ -0,0 +1,103 @@
+const EventEmitter = require('events');
+const { ivToStr } = require('./utils');
+
+class FileSender extends EventEmitter {
+  constructor(file) {
+    super();
+    this.file = file;
+    this.iv = window.crypto.getRandomValues(new Uint8Array(16));
+  }
+
+  static delete(fileId, token) {
+    return new Promise((resolve, reject) => {
+      if (!fileId || !token) {
+        return resolve();
+      }
+      let xhr = new XMLHttpRequest();
+      xhr.open('post', '/delete/' + fileId, true);
+      xhr.setRequestHeader('Content-Type', 'application/json');
+
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === XMLHttpRequest.DONE) {
+          resolve();
+        }
+
+        if (xhr.status === 200) {
+          console.log('The file was successfully deleted.');
+        } else {
+          console.log('The file has expired, or has already been deleted.');
+        }
+      };
+
+      xhr.send(JSON.stringify({ delete_token: token }));
+    });
+  }
+
+  upload() {
+    return Promise.all([
+      window.crypto.subtle.generateKey(
+        {
+          name: 'AES-CBC',
+          length: 128
+        },
+        true,
+        ['encrypt', 'decrypt']
+      ),
+      new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.readAsArrayBuffer(this.file);
+        reader.onload = function(event) {
+          resolve(new Uint8Array(this.result));
+        };
+      })
+    ])
+      .then(([secretKey, plaintext]) => {
+        return Promise.all([
+          window.crypto.subtle.encrypt(
+            {
+              name: 'AES-CBC',
+              iv: this.iv
+            },
+            secretKey,
+            plaintext
+          ),
+          window.crypto.subtle.exportKey('jwk', secretKey)
+        ]);
+      })
+      .then(([encrypted, keydata]) => {
+        return new Promise((resolve, reject) => {
+          let file = this.file;
+          let fileId = ivToStr(this.iv);
+          let dataView = new DataView(encrypted);
+          let blob = new Blob([dataView], { type: file.type });
+          let fd = new FormData();
+          fd.append('fname', file.name);
+          fd.append('data', blob, file.name);
+
+          let xhr = new XMLHttpRequest();
+
+          xhr.upload.addEventListener('progress', e => {
+            if (e.lengthComputable) {
+              let percentComplete = Math.floor(e.loaded / e.total * 100);
+              this.emit('progress', percentComplete);
+            }
+          });
+
+          xhr.onreadystatechange = () => {
+            if (xhr.readyState == XMLHttpRequest.DONE) {
+              resolve({
+                fileId: fileId,
+                secretKey: keydata.k,
+                deleteToken: xhr.responseText
+              });
+            }
+          };
+
+          xhr.open('post', '/upload/' + fileId, true);
+          xhr.send(fd);
+        });
+      });
+  }
+}
+
+module.exports = FileSender;

frontend/src/main.js

@@ -0,0 +1,2 @@
+require('./upload');
+require('./download');

frontend/src/upload.js

@@ -0,0 +1,44 @@
+const FileSender = require('./fileSender');
+
+let onChange = event => {
+  const file = event.target.files[0];
+
+  let li = document.createElement('li');
+  let name = document.createElement('p');
+  name.innerText = file.name;
+  li.appendChild(name);
+
+  let link = document.createElement('a');
+  li.appendChild(link);
+
+  let progress = document.createElement('p');
+  li.appendChild(progress);
+
+  document.getElementById('uploaded_files').appendChild(li);
+
+  const fileSender = new FileSender(file);
+  fileSender.on('progress', percentComplete => {
+    progress.innerText = `Progress: ${percentComplete}%`;
+  });
+  fileSender.upload().then(info => {
+    const url = `${window.location
+      .origin}/download/${info.fileId}/#${info.secretKey}`;
+    localStorage.setItem(info.fileId, info.deleteToken);
+    link.innerText = url;
+    link.setAttribute('href', url);
+    let btn = document.createElement('button');
+    btn.innerText = 'Delete from server';
+    btn.addEventListener('click', () => {
+      FileSender.delete(
+        info.fileId,
+        localStorage.getItem(info.fileId)
+      ).then(() => {
+        document.getElementById('uploaded_files').removeChild(li);
+        localStorage.removeItem(info.fileId);
+      });
+    });
+    li.appendChild(btn);
+  });
+};
+
+window.onChange = onChange;

frontend/src/utils.js

@@ -0,0 +1,26 @@
+function ivToStr(iv) {
+  let hexStr = '';
+  for (let i in iv) {
+    if (iv[i] < 16) {
+      hexStr += '0' + iv[i].toString(16);
+    } else {
+      hexStr += iv[i].toString(16);
+    }
+  }
+  window.hexStr = hexStr;
+  return hexStr;
+}
+
+function strToIv(str) {
+  let iv = new Uint8Array(16);
+  for (let i = 0; i < str.length; i += 2) {
+    iv[i / 2] = parseInt(str.charAt(i) + str.charAt(i + 1), 16);
+  }
+
+  return iv;
+}
+
+module.exports = {
+  ivToStr,
+  strToIv
+};

package.json

@@ -3,9 +3,9 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "format": "prettier --single-quote --write 'public/*.js' 'app.js'",
+    "format": "prettier --single-quote --write 'frontend/src/*.js'",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node app.js"
+    "start": "watchify frontend/src/main.js -o public/bundle.js -d | node server/portal_server.js"
   },
   "author": "",
   "license": "ISC",
@@ -17,5 +17,9 @@
     "path": "^0.12.7",
     "prettier": "^1.3.1",
     "redis": "^2.7.1"
+  },
+  "devDependencies": {
+    "browserify": "^14.4.0",
+    "watchify": "^3.9.0"
   }
 }

public/download.html

@@ -2,7 +2,7 @@
 <html>
 <head>
 <title>Download your file</title>
-<script type="text/javascript" src="/download.js"></script>
+<script type="text/javascript" src="/bundle.js"></script>
 </head>
 <body>
 

public/download.js

@@ -1,135 +0,0 @@
-function download() {
-  var xhr = new XMLHttpRequest();
-  xhr.open('get', '/assets' + location.pathname.slice(0, -1), true);
-  xhr.responseType = 'blob';
-
-  var li = document.createElement('li');
-  var progress = document.createElement('p');
-  li.appendChild(progress);
-  document.getElementById('downloaded_files').appendChild(li);
-
-  xhr.addEventListener('progress', returnBindedLI(li, progress));
-
-  xhr.onload = function(e) {
-    // maybe send a separate request before this one to get the filename?
-
-    // maybe render the html itself with the filename, since it's generated server side
-    // after a get request with the unique id
-    var name = document.createElement('p');
-    name.innerHTML = xhr
-      .getResponseHeader('Content-Disposition')
-      .match(/filename="(.+)"/)[1];
-    li.insertBefore(name, li.firstChild);
-
-    if (this.status == 200) {
-      let self = this;
-      var blob = new Blob([this.response]);
-      var arrayBuffer;
-      var fileReader = new FileReader();
-      fileReader.onload = function() {
-        arrayBuffer = this.result;
-        var array = new Uint8Array(arrayBuffer);
-        salt = strToIv(location.pathname.slice(10, -1));
-
-        window.crypto.subtle
-          .importKey(
-            'jwk',
-            {
-              kty: 'oct',
-              k: location.hash.slice(1),
-              alg: 'A128CBC',
-              ext: true
-            },
-            {
-              name: 'AES-CBC'
-            },
-            true,
-            ['encrypt', 'decrypt']
-          )
-          .then(function(key) {
-            window.crypto.subtle
-              .decrypt(
-                {
-                  name: 'AES-CBC',
-                  iv: salt
-                },
-                key,
-                array
-              )
-              .then(function(decrypted) {
-                var dataView = new DataView(decrypted);
-                var blob = new Blob([dataView]);
-                var downloadUrl = URL.createObjectURL(blob);
-                var a = document.createElement('a');
-                a.href = downloadUrl;
-                a.download = xhr
-                  .getResponseHeader('Content-Disposition')
-                  .match(/filename="(.+)"/)[1];
-                document.body.appendChild(a);
-                a.click();
-              })
-              .catch(function(err) {
-                alert(
-                  'This link is either invalid or has expired, or the uploader has deleted the file.'
-                );
-                console.error(err);
-              });
-          })
-          .catch(function(err) {
-            console.error(err);
-          });
-      };
-      fileReader.readAsArrayBuffer(blob);
-    } else {
-      alert(
-        'This link is either invalid or has expired, or the uploader has deleted the file.'
-      );
-    }
-  };
-  xhr.send();
-}
-
-function ivToStr(iv) {
-  let hexStr = '';
-  for (var i in iv) {
-    if (iv[i] < 16) {
-      hexStr += '0' + iv[i].toString(16);
-    } else {
-      hexStr += iv[i].toString(16);
-    }
-  }
-  window.hexStr = hexStr;
-  return hexStr;
-}
-
-function strToIv(str) {
-  var iv = new Uint8Array(16);
-  for (var i = 0; i < str.length; i += 2) {
-    iv[i / 2] = parseInt(str.charAt(i) + str.charAt(i + 1), 16);
-  }
-
-  return iv;
-}
-
-function returnBindedLI(li, progress) {
-  return function updateProgress(e) {
-    if (e.lengthComputable) {
-      var percentComplete = Math.floor(e.loaded / e.total * 100);
-      progress.innerHTML = 'Progress: ' + percentComplete + '%';
-    }
-
-    if (percentComplete === 100) {
-      var finished = document.createElement('p');
-      finished.innerHTML = 'Your download has finished.';
-      li.appendChild(finished);
-
-      var close = document.createElement('button');
-      close.innerHTML = 'Ok';
-      close.addEventListener('click', function() {
-        document.getElementById('downloaded_files').removeChild(li);
-      });
-
-      li.appendChild(close);
-    }
-  };
-}

public/index.html

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html>
 <head>
-<title>Firefox Fileshare</title>
-<script src="upload.js"></script>
+  <title>Firefox Fileshare</title>
+  <script src="bundle.js"></script>
 
 </head>
 <body>

public/upload.js

@@ -1,160 +0,0 @@
-function onChange(event) {
-  var file = event.target.files[0];
-  var reader = new FileReader();
-  reader.onload = function(event) {
-    let self = this;
-    window.crypto.subtle
-      .generateKey(
-        {
-          name: 'AES-CBC',
-          length: 128
-        },
-        true,
-        ['encrypt', 'decrypt']
-      )
-      .then(function(key) {
-        var arrayBuffer = self.result;
-        var array = new Uint8Array(arrayBuffer);
-
-        var random_iv = window.crypto.getRandomValues(new Uint8Array(16));
-
-        window.crypto.subtle
-          .encrypt(
-            {
-              name: 'AES-CBC',
-              iv: random_iv
-            },
-            key,
-            array
-          )
-          .then(function(encrypted) {
-            var dataView = new DataView(encrypted);
-            var blob = new Blob([dataView], { type: file.type });
-
-            var fd = new FormData();
-            fd.append('fname', file.name);
-            fd.append('data', blob, file.name);
-
-            var xhr = new XMLHttpRequest();
-            var hex = ivToStr(random_iv);
-            xhr.open('post', '/upload/' + hex, true);
-
-            var li = document.createElement('li');
-            var name = document.createElement('p');
-            name.innerHTML = file.name;
-            li.appendChild(name);
-
-            var link = document.createElement('a');
-            li.appendChild(link);
-
-            var progress = document.createElement('p');
-            li.appendChild(progress);
-            document.getElementById('uploaded_files').appendChild(li);
-
-            xhr.upload.addEventListener(
-              'progress',
-              returnBindedLI(progress, name, link, li)
-            );
-
-            xhr.onreadystatechange = function() {
-              if (xhr.readyState == XMLHttpRequest.DONE) {
-                window.crypto.subtle
-                  .exportKey('jwk', key)
-                  .then(function(keydata) {
-                    var curr_name = localStorage.getItem(file.name);
-
-                    localStorage.setItem(hex, xhr.responseText);
-
-                    link.innerHTML =
-                      'http://localhost:3000/download/' +
-                      hex +
-                      '/#' +
-                      keydata.k;
-                    link.setAttribute(
-                      'href',
-                      'http://localhost:3000/download/' + hex + '/#' + keydata.k
-                    );
-
-                    console.log(
-                      'Share this link with a friend: http://localhost:3000/download/' +
-                        hex +
-                        '/#' +
-                        keydata.k
-                    );
-                  });
-              }
-            };
-
-            xhr.send(fd);
-          })
-          .catch(function(err) {
-            console.error(err);
-          });
-      })
-      .catch(function(err) {
-        console.error(err);
-      });
-  };
-  reader.readAsArrayBuffer(file);
-}
-
-function ivToStr(iv) {
-  let hexStr = '';
-  for (var i in iv) {
-    if (iv[i] < 16) {
-      hexStr += '0' + iv[i].toString(16);
-    } else {
-      hexStr += iv[i].toString(16);
-    }
-  }
-  window.hexStr = hexStr;
-  return hexStr;
-}
-
-function strToIv(str) {
-  var iv = new Uint8Array(16);
-  for (var i = 0; i < str.length; i += 2) {
-    iv[i / 2] = parseInt(str.charAt(i) + str.charAt(i + 1), 16);
-  }
-
-  return iv;
-}
-
-function returnBindedLI(a_element, name, link, li) {
-  return function updateProgress(e) {
-    if (e.lengthComputable) {
-      var percentComplete = Math.floor(e.loaded / e.total * 100);
-      a_element.innerHTML = 'Progress: ' + percentComplete + '%';
-
-      if (percentComplete === 100) {
-        var btn = document.createElement('button');
-        btn.innerHTML = 'Delete from server';
-        btn.addEventListener('click', function() {
-          var segments = link.innerHTML.split('/');
-          var key = segments[segments.length - 2];
-
-          var xhr = new XMLHttpRequest();
-          xhr.open('post', '/delete/' + key, true);
-          xhr.setRequestHeader('Content-Type', 'application/json');
-          if (!localStorage.getItem(key)) return;
-
-          xhr.send(JSON.stringify({ delete_token: localStorage.getItem(key) }));
-
-          xhr.onreadystatechange = function() {
-            if (xhr.readyState === XMLHttpRequest.DONE) {
-              document.getElementById('uploaded_files').removeChild(li);
-              localStorage.removeItem(key);
-            }
-
-            if (xhr.status === 200) {
-              console.log('The file was successfully deleted.');
-            } else {
-              console.log('The file has expired, or has already been deleted.');
-            }
-          };
-        });
-        li.appendChild(btn);
-      }
-    }
-  };
-}

server/portal_server.js

@@ -0,0 +1,115 @@
+const express = require("express")
+const busboy = require("connect-busboy");
+const path = require("path");
+const fs = require("fs-extra");
+const bodyParser = require("body-parser");
+const crypto = require("crypto");
+
+const app = express()
+const redis = require("redis"),
+    client = redis.createClient();
+
+client.on("error", (err) => {
+  console.log(err);
+})
+
+app.use(busboy());
+app.use(bodyParser.json());
+app.use(express.static(path.join(__dirname, "../public")));
+
+app.get("/download/:id", (req, res) => {
+  res.sendFile(path.join(__dirname + "/../public/download.html"));
+});
+
+app.get("/assets/download/:id", (req, res) => {
+
+  let id = req.params.id;
+  if (!validateID(id)){ 
+    res.send(404);
+    return;
+  }
+
+  
+  client.hget(id, "filename", (err, reply) => { // maybe some expiration logic too
+    if (!reply) {
+      res.sendStatus(404);
+    } else {
+      res.setHeader("Content-Disposition", "attachment; filename=" + reply);
+      res.setHeader("Content-Type", "application/octet-stream");
+      
+      res.download(__dirname + "/../static/" + id, reply, (err) => {
+        if (!err) {
+          client.del(id);
+          fs.unlinkSync(__dirname + "/../static/" + id);
+        }
+      });
+    }
+  })
+  
+});
+
+app.post("/delete/:id", (req, res) => {
+  let id = req.params.id;
+
+  if (!validateID(id)){ 
+    res.send(404);
+    return;
+  }
+  
+  let delete_token = req.body.delete_token;
+  
+  if (!delete_token){ 
+    res.sendStatus(404);
+  }
+
+  client.hget(id, "delete", (err, reply) => {
+    if (!reply) {
+      res.sendStatus(404);
+    } else {
+      client.del(id);
+      fs.unlinkSync(__dirname + "/../static/" + id);
+      res.sendStatus(200);
+    }
+  })
+});
+
+app.post("/upload/:id", (req, res, next) => {
+    
+    if (!validateID(req.params.id)){ 
+      res.send(404);
+      return;
+    }
+
+    let fstream;
+    req.pipe(req.busboy);
+    req.busboy.on("file", (fieldname, file, filename) => {
+        console.log("Uploading: " + filename);
+
+        //Path where image will be uploaded
+        fstream = fs.createWriteStream(__dirname + "/../static/" + req.params.id);
+        file.pipe(fstream);
+        fstream.on("close", () => {
+            let id = req.params.id;
+            let uuid = crypto.randomBytes(10).toString('hex');
+
+            client.hmset([id, "filename", filename, "delete", uuid]);
+
+            // delete the file off the server in 24 hours
+            // setTimeout(() => {
+            //   fs.unlinkSync(__dirname + "/static/" + id);
+            // }, 86400000);
+
+            client.expire(id, 86400000);
+            console.log("Upload Finished of " + filename);      
+            res.send(uuid);
+        });
+    });
+});
+
+app.listen(3000, () => {
+  console.log("Portal app listening on port 3000!")
+})
+
+let validateID = (route_id) => {
+  return route_id.match(/^[0-9a-fA-F]{32}$/) !== null;
+}