From 796577ee2b4d5d04f3b3788071feae067f468ced Mon Sep 17 00:00:00 2001 From: Daniela Arcese Date: Thu, 8 Jun 2017 15:57:56 -0400 Subject: [PATCH 1/6] add drag and drop and delete confirmation --- frontend/src/upload.js | 66 ++++++++++++++++++++++++++++++++---------- public/main.css | 55 ++++++++++++++++++++++++++++++++++- views/index.handlebars | 8 +++-- 3 files changed, 109 insertions(+), 20 deletions(-) diff --git a/frontend/src/upload.js b/frontend/src/upload.js index 40ee4b90..999fa4eb 100644 --- a/frontend/src/upload.js +++ b/frontend/src/upload.js @@ -1,16 +1,18 @@ const FileSender = require('./fileSender'); $(document).ready(function() { + // reset copy button let copyBtn = $('#copy-btn'); copyBtn.attr('disabled', false); copyBtn.html('Copy'); + $('#page-one').show(); $('#file-list').hide(); $('#upload-progress').hide(); $('#share-link').hide(); + // copy link to clipboard copyBtn.click(() => { - console.log('copied'); var aux = document.createElement('input'); aux.setAttribute('value', $('#link').attr('value')); document.body.appendChild(aux); @@ -20,6 +22,8 @@ $(document).ready(function() { copyBtn.attr('disabled', true); copyBtn.html('Copied!'); }); + + // link back to home page $('.send-new').click(() => { $('#page-one').show(); $('#file-list').show(); @@ -29,25 +33,46 @@ $(document).ready(function() { copyBtn.html('Copy'); }); - let onChange = event => { - const file = event.target.files[0]; - + // on file upload by browse or drag & drop + window.onUpload = event => { + event.preventDefault(); + let file = ""; + if (event.type == "drop"){ + file = event.dataTransfer.files[0]; + } else { + file = event.target.files[0]; + } let fileList = $('#uploaded-files'); let row = document.createElement('tr'); let name = document.createElement('td'); let link = document.createElement('td'); let expiry = document.createElement('td'); - + let del = document.createElement('td'); + let btn = document.createElement('button'); + let popupDiv = document.createElement('div'); + let $popupText = $('', {'class': 'popuptext'}); let cellText = document.createTextNode(file.name); + let progress = document.createElement('p'); name.appendChild(cellText); - let progress = document.createElement('p'); + // create delete button + btn.innerHTML = 'x'; + btn.classList.add('delete-btn'); + // create popup + popupDiv.classList.add('popup'); + $popupText.html("Delete Nevermind"); + + // add data cells to table row row.appendChild(name); row.appendChild(link); row.appendChild(expiry); - fileList.append(row); + popupDiv.appendChild(btn); + $(popupDiv).append($popupText); + del.appendChild(popupDiv); + row.appendChild(del); + fileList.append(row); //add row to table const fileSender = new FileSender(file); fileSender.on('progress', percentComplete => { @@ -62,25 +87,34 @@ $(document).ready(function() { $('#link').attr('value', url); link.innerHTML = url; localStorage.setItem(info.fileId, info.deleteToken); - let del = document.createElement('td'); - let btn = document.createElement('button'); - btn.innerHTML = 'x'; - btn.classList.add('delete-btn'); - btn.addEventListener('click', e => { + + // delete file + console.log($popupText.first()); + $popupText.find(".del-file").click(e => { FileSender.delete( info.fileId, localStorage.getItem(info.fileId) ).then(() => { - e.target.parentNode.parentNode.remove(); + e.target.parentNode.parentNode.parentNode.parentNode.remove(); localStorage.removeItem(info.fileId); }); }); - del.appendChild(btn); - row.appendChild(del); + + // show popup + btn.addEventListener('click', e => { + $popupText.toggleClass('show'); + }); + // hide popup + $popupText.find(".nvm").click( e => { + $popupText.toggleClass('show'); + }); $('#upload-progress').hide(); $('#share-link').show(); }); }; - window.onChange = onChange; + window.allowDrop = function(ev) { + ev.preventDefault(); + } + }); diff --git a/public/main.css b/public/main.css index 2329feb7..20fb6242 100644 --- a/public/main.css +++ b/public/main.css @@ -28,7 +28,7 @@ input, select, textarea, button { .title { font-size: 14px; width: 80%; - margin: 50px auto; + margin: 40px auto; text-align: center; } @@ -108,6 +108,59 @@ td { cursor: pointer; } +/* Popup container */ +.popup { + position: relative; + display: inline-block; + cursor: pointer; +} + +/* The actual popup (appears on top) */ +.popup .popuptext { + visibility: hidden; + width: 160px; + background-color: #555; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 8px 0; + position: absolute; + z-index: 1; + bottom: 125%; + left: 50%; + margin-left: -80px; +} + +/* Popup arrow */ +.popup .popuptext::after { + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: #555 transparent transparent transparent; +} + +/* Toggle this class when clicking on the popup container (hide and show the popup) */ +.popup .show { + visibility: visible; + -webkit-animation: fadeIn 1s; + animation: fadeIn 1s +} + +/* Add animation (fade in the popup) */ +@-webkit-keyframes fadeIn { + from {opacity: 0;} + to {opacity: 1;} +} + +@keyframes fadeIn { + from {opacity: 0;} + to {opacity:1 ;} +} + /** upload-progress **/ diff --git a/views/index.handlebars b/views/index.handlebars index d44e98e0..fa46a515 100644 --- a/views/index.handlebars +++ b/views/index.handlebars @@ -14,7 +14,7 @@
Share your files quickly, privately and securely.
-
+
DRAG & DROP @@ -26,7 +26,7 @@
- +
@@ -41,7 +41,9 @@ Expires in Delete -
+
From 90809bf05d4f404f8e008d94154bf31439b6e6db Mon Sep 17 00:00:00 2001 From: Daniela Arcese Date: Thu, 8 Jun 2017 16:11:28 -0400 Subject: [PATCH 2/6] format --- frontend/src/upload.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/frontend/src/upload.js b/frontend/src/upload.js index 999fa4eb..74fb33e1 100644 --- a/frontend/src/upload.js +++ b/frontend/src/upload.js @@ -36,8 +36,8 @@ $(document).ready(function() { // on file upload by browse or drag & drop window.onUpload = event => { event.preventDefault(); - let file = ""; - if (event.type == "drop"){ + let file = ''; + if (event.type == 'drop') { file = event.dataTransfer.files[0]; } else { file = event.target.files[0]; @@ -50,7 +50,7 @@ $(document).ready(function() { let del = document.createElement('td'); let btn = document.createElement('button'); let popupDiv = document.createElement('div'); - let $popupText = $('', {'class': 'popuptext'}); + let $popupText = $('', { 'class': 'popuptext' }); let cellText = document.createTextNode(file.name); let progress = document.createElement('p'); @@ -62,7 +62,9 @@ $(document).ready(function() { // create popup popupDiv.classList.add('popup'); - $popupText.html("Delete Nevermind"); + $popupText.html( + "Delete Nevermind" + ); // add data cells to table row row.appendChild(name); @@ -90,7 +92,7 @@ $(document).ready(function() { // delete file console.log($popupText.first()); - $popupText.find(".del-file").click(e => { + $popupText.find('.del-file').click(e => { FileSender.delete( info.fileId, localStorage.getItem(info.fileId) @@ -105,7 +107,7 @@ $(document).ready(function() { $popupText.toggleClass('show'); }); // hide popup - $popupText.find(".nvm").click( e => { + $popupText.find('.nvm').click(e => { $popupText.toggleClass('show'); }); $('#upload-progress').hide(); @@ -115,6 +117,5 @@ $(document).ready(function() { window.allowDrop = function(ev) { ev.preventDefault(); - } - + }; }); From 42be528c906d6566434f95a04cb69ce23a2cf3b9 Mon Sep 17 00:00:00 2001 From: Daniela Arcese Date: Thu, 8 Jun 2017 17:38:00 -0400 Subject: [PATCH 3/6] return 200 from server on successful delete --- server/portal_server.js | 1 + 1 file changed, 1 insertion(+) diff --git a/server/portal_server.js b/server/portal_server.js index 5b2585f2..62e234aa 100644 --- a/server/portal_server.js +++ b/server/portal_server.js @@ -100,6 +100,7 @@ app.post('/delete/:id', (req, res) => { .then(err => { if (!err) { console.log('Deleted.'); + res.sendStatus(200); } }) .catch(err => res.sendStatus(404)); From dea589df1417c8b280df5a64759e7676c806c8a2 Mon Sep 17 00:00:00 2001 From: Daniela Arcese Date: Fri, 9 Jun 2017 09:45:06 -0400 Subject: [PATCH 4/6] making changes --- frontend/src/fileSender.js | 92 +++++++++++++++++++------------------- frontend/src/upload.js | 18 +++++--- public/main.css | 10 +---- views/download.handlebars | 5 +-- views/index.handlebars | 3 -- 5 files changed, 60 insertions(+), 68 deletions(-) diff --git a/frontend/src/fileSender.js b/frontend/src/fileSender.js index 69fe597a..5b50b0da 100644 --- a/frontend/src/fileSender.js +++ b/frontend/src/fileSender.js @@ -11,7 +11,7 @@ class FileSender extends EventEmitter { static delete(fileId, token) { return new Promise((resolve, reject) => { if (!fileId || !token) { - return resolve(); + return reject(); } let xhr = new XMLHttpRequest(); xhr.open('post', '/delete/' + fileId, true); @@ -51,55 +51,55 @@ class FileSender extends EventEmitter { }; }) ]) - .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); + .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(); + 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) { - // uuid field and url field - let responseObj = JSON.parse(xhr.responseText); - resolve({ - url: responseObj.url, - fileId: fileId, - secretKey: keydata.k, - deleteToken: responseObj.uuid - }); - } - }; - - xhr.open('post', '/upload/' + fileId, true); - xhr.send(fd); + 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) { + // uuid field and url field + let responseObj = JSON.parse(xhr.responseText); + resolve({ + url: responseObj.url, + fileId: fileId, + secretKey: keydata.k, + deleteToken: responseObj.uuid + }); + } + }; + + xhr.open('post', '/upload/' + fileId, true); + xhr.send(fd); }); + }); } } diff --git a/frontend/src/upload.js b/frontend/src/upload.js index 74fb33e1..37b8740e 100644 --- a/frontend/src/upload.js +++ b/frontend/src/upload.js @@ -42,7 +42,7 @@ $(document).ready(function() { } else { file = event.target.files[0]; } - let fileList = $('#uploaded-files'); + let $fileList = $('#uploaded-files'); let row = document.createElement('tr'); let name = document.createElement('td'); let link = document.createElement('td'); @@ -74,7 +74,7 @@ $(document).ready(function() { $(popupDiv).append($popupText); del.appendChild(popupDiv); row.appendChild(del); - fileList.append(row); //add row to table + $fileList.append(row); //add row to table const fileSender = new FileSender(file); fileSender.on('progress', percentComplete => { @@ -91,28 +91,32 @@ $(document).ready(function() { localStorage.setItem(info.fileId, info.deleteToken); // delete file - console.log($popupText.first()); $popupText.find('.del-file').click(e => { FileSender.delete( info.fileId, localStorage.getItem(info.fileId) - ).then(() => { - e.target.parentNode.parentNode.parentNode.parentNode.remove(); + ).then(() => { + // + $(e.target).parents('tr').remove(); localStorage.removeItem(info.fileId); }); }); // show popup btn.addEventListener('click', e => { - $popupText.toggleClass('show'); + toggleShow(); }); // hide popup $popupText.find('.nvm').click(e => { - $popupText.toggleClass('show'); + toggleShow(); }); $('#upload-progress').hide(); $('#share-link').show(); }); + + function toggleShow(){ + $popupText.toggleClass('show'); + } }; window.allowDrop = function(ev) { diff --git a/public/main.css b/public/main.css index 20fb6242..9a7d4504 100644 --- a/public/main.css +++ b/public/main.css @@ -143,17 +143,9 @@ td { border-color: #555 transparent transparent transparent; } -/* Toggle this class when clicking on the popup container (hide and show the popup) */ .popup .show { visibility: visible; - -webkit-animation: fadeIn 1s; - animation: fadeIn 1s -} - -/* Add animation (fade in the popup) */ -@-webkit-keyframes fadeIn { - from {opacity: 0;} - to {opacity: 1;} + animation: fadeIn 1s; } @keyframes fadeIn { diff --git a/views/download.handlebars b/views/download.handlebars index 516172c3..5aee5344 100644 --- a/views/download.handlebars +++ b/views/download.handlebars @@ -13,10 +13,9 @@
{{#if filename}}
- Your friend is sending you a file: + Your friend is sending you a file:
+ {{{filename}}} ({{{filesize}}})
- - {{{filename}}} ({{{filesize}}}) From 3505574f35cc6e59076ffbc40b1f3ff12ec2c1fd Mon Sep 17 00:00:00 2001 From: Daniela Arcese Date: Fri, 9 Jun 2017 10:47:12 -0400 Subject: [PATCH 5/6] reformat click listeners --- frontend/src/upload.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/frontend/src/upload.js b/frontend/src/upload.js index 37b8740e..0ca34460 100644 --- a/frontend/src/upload.js +++ b/frontend/src/upload.js @@ -103,17 +103,13 @@ $(document).ready(function() { }); // show popup - btn.addEventListener('click', e => { - toggleShow(); - }); + btn.addEventListener('click', toggleShow); // hide popup - $popupText.find('.nvm').click(e => { - toggleShow(); - }); + $popupText.find('.nvm').click(toggleShow); $('#upload-progress').hide(); $('#share-link').show(); }); - + function toggleShow(){ $popupText.toggleClass('show'); } From 2323b17e1e394c5bdf5defb514b65d130efe215f Mon Sep 17 00:00:00 2001 From: Daniela Arcese Date: Fri, 9 Jun 2017 11:10:35 -0400 Subject: [PATCH 6/6] change animation to transition --- public/main.css | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/public/main.css b/public/main.css index 9a7d4504..38fd83e3 100644 --- a/public/main.css +++ b/public/main.css @@ -113,6 +113,7 @@ td { position: relative; display: inline-block; cursor: pointer; + } /* The actual popup (appears on top) */ @@ -129,6 +130,8 @@ td { bottom: 125%; left: 50%; margin-left: -80px; + transition: opacity 0.5s; + opacity: 0; } /* Popup arrow */ @@ -145,12 +148,7 @@ td { .popup .show { visibility: visible; - animation: fadeIn 1s; -} - -@keyframes fadeIn { - from {opacity: 0;} - to {opacity:1 ;} + opacity: 1; } /** upload-progress **/