From 532f3c31a48562b4477d4c3f3bcdb81522e52d2d Mon Sep 17 00:00:00 2001 From: Daniela Arcese Date: Mon, 5 Jun 2017 10:25:10 -0400 Subject: [PATCH] making changes --- frontend/src/upload.js | 23 ++++--- public/index.html | 2 +- public/main.css | 8 ++- public/upload.js | 147 ----------------------------------------- 4 files changed, 20 insertions(+), 160 deletions(-) delete mode 100644 public/upload.js diff --git a/frontend/src/upload.js b/frontend/src/upload.js index 5e29f974..d3546a6e 100644 --- a/frontend/src/upload.js +++ b/frontend/src/upload.js @@ -3,21 +3,22 @@ const FileSender = require('./fileSender'); let onChange = event => { const file = event.target.files[0]; - var row = document.createElement("tr"); - var name = document.createElement("td"); - var link = document.createElement("td"); - var expiry = document.createElement("td"); + let fileList = document.getElementById("uploaded-files"); + let row = document.createElement("tr"); + let name = document.createElement("td"); + let link = document.createElement("td"); + let expiry = document.createElement("td"); - var cellText = document.createTextNode(file.name); + let cellText = document.createTextNode(file.name); name.appendChild(cellText); - var progress = document.createElement("p"); + let progress = document.createElement("p"); row.appendChild(name); row.appendChild(link); row.appendChild(expiry); - document.getElementById("uploaded-files").appendChild(row); + fileList.appendChild(row); const fileSender = new FileSender(file); fileSender.on('progress', percentComplete => { @@ -28,16 +29,16 @@ let onChange = event => { .origin}/download/${info.fileId}/#${info.secretKey}`; link.innerHTML = url; localStorage.setItem(info.fileId, info.deleteToken); - var del = document.createElement("td"); - var btn = document.createElement("button"); + let del = document.createElement("td"); + let btn = document.createElement("button"); btn.innerHTML = "x"; - btn.style = "padding: 0; border: none; background: none; cursor: pointer" + btn.classList.add('delete-btn'); btn.addEventListener('click', () => { FileSender.delete( info.fileId, localStorage.getItem(info.fileId) ).then(() => { - document.getElementById('uploaded-files').removeChild(row); + fileList.removeChild(row); localStorage.removeItem(info.fileId); }); }); diff --git a/public/index.html b/public/index.html index ca7683d4..e6b6787d 100644 --- a/public/index.html +++ b/public/index.html @@ -6,7 +6,7 @@ - +
diff --git a/public/main.css b/public/main.css index e26643a4..edf112ee 100644 --- a/public/main.css +++ b/public/main.css @@ -2,6 +2,7 @@ /** page-one **/ body { + background: url('resources/background.png'); font-family: 'Fira Sans'; font-weight: 300; font-style: normal; @@ -81,7 +82,6 @@ td{ #uploaded-files{ width: 472px; margin: 10px auto ; - float: top; table-layout: fixed; overflow-y: scroll; } @@ -89,3 +89,9 @@ td{ overflow-y: scroll; height: 90px; } +.delete-btn{ + padding: 0; + border: none; + background: none; + cursor: pointer; +} diff --git a/public/upload.js b/public/upload.js deleted file mode 100644 index 1bc87b7a..00000000 --- a/public/upload.js +++ /dev/null @@ -1,147 +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 row = document.createElement("tr"); - var name = document.createElement("td"); - var link = document.createElement("td"); - var expiry = document.createElement("td"); - - var cellText = document.createTextNode(file.name); - //name.innerHTML = file.name; - name.appendChild(cellText); - - var progress = document.createElement("p"); - //li.appendChild(progress); - row.appendChild(name); - row.appendChild(link); - row.appendChild(expiry); - document.getElementById("uploaded-files").appendChild(row); - - - xhr.upload.addEventListener("progress", returnBindedLI(progress, name, link, row)); - - 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 del = document.createElement("td"); - var btn = document.createElement("button"); - btn.innerHTML = "x"; - btn.style = "padding: 0; border: none; background: none; cursor: pointer" - 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."); - } - } - - }); - del.appendChild(btn); - li.appendChild(del); - } - } - } - }