diff --git a/public/index.html b/public/index.html index 68b8740b..7b867b18 100644 --- a/public/index.html +++ b/public/index.html @@ -9,31 +9,42 @@
-
- Share your files quickly, privately and securely. +
+
+ Share your files quickly, privately and securely. +
+
+
+
+ DRAG & DROP +
+
+
+ your file/folder here or +
+
+
+ + +
+
+
+
-
-
-
- DRAG & DROP -
-
-
- your file/folder here or -
-
-
- - -
-
-
+
+ + + + + + + + +
FileCopy URLExpires inDelete
+
- - diff --git a/public/main.css b/public/main.css index 24b2d6e4..e26643a4 100644 --- a/public/main.css +++ b/public/main.css @@ -1,4 +1,6 @@ /*** index.html ***/ + +/** page-one **/ body { font-family: 'Fira Sans'; font-weight: 300; @@ -64,3 +66,26 @@ form{ width: 45px; float: right; } + +/** file-list **/ +th{ + font-size: 10px; + color: #737373; + font-weight: normal; + text-align: left; +} +td{ + font-size: 12px; + vertical-align: top; +} +#uploaded-files{ + width: 472px; + margin: 10px auto ; + float: top; + table-layout: fixed; + overflow-y: scroll; +} +#file-list{ + overflow-y: scroll; + height: 90px; +} diff --git a/public/upload.js b/public/upload.js index 9e3c8789..1bc87b7a 100644 --- a/public/upload.js +++ b/public/upload.js @@ -5,7 +5,7 @@ function onChange(event) { let self = this; window.crypto.subtle.generateKey({ name: "AES-CBC", - length: 128 + length: 128 }, true, ["encrypt", "decrypt"]) @@ -23,7 +23,7 @@ function onChange(event) { .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); @@ -32,26 +32,30 @@ function onChange(event) { 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 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); - document.getElementById("uploaded_files").appendChild(li); + //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, li)); + xhr.upload.addEventListener("progress", returnBindedLI(progress, name, link, row)); - xhr.onreadystatechange = function() { + 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; @@ -69,73 +73,75 @@ function onChange(event) { }); }) - .catch(function(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); + }; + 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); + } + } } } - 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); - } - } - } -} -