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);
- }
- }
- }
- }