From 9e228417b4d1a8a0456e82cc835703ad5451dc83 Mon Sep 17 00:00:00 2001 From: Daniela Arcese Date: Tue, 20 Jun 2017 15:23:12 -0400 Subject: [PATCH 1/4] add progress bars --- frontend/src/download.js | 19 ++++++--- frontend/src/upload.js | 39 +++++++++++------- public/main.css | 87 ++++++++++++++++++++++++++------------- views/download.handlebars | 25 ++++++++--- views/index.handlebars | 2 + 5 files changed, 118 insertions(+), 54 deletions(-) diff --git a/frontend/src/download.js b/frontend/src/download.js index 1048647c..355b32f0 100644 --- a/frontend/src/download.js +++ b/frontend/src/download.js @@ -2,6 +2,7 @@ const FileReceiver = require('./fileReceiver'); const $ = require('jquery'); $(document).ready(function() { + $('#download-progress').hide(); $('#send-file').click(() => { window.location.replace(`${window.location.origin}`); }); @@ -10,16 +11,22 @@ $(document).ready(function() { let li = document.createElement('li'); let name = document.createElement('p'); - let progress = document.createElement('p'); - let btn = $('#download-btn'); + let $btn = $('#download-btn'); fileReceiver.on('progress', percentComplete => { - progress.innerText = `Progress: ${percentComplete}%`; - + $('#download-page-one').hide(); + $('.send-new').hide(); + $('#download-progress').show(); + // update progress bar + document.querySelector('#progress-bar').style.setProperty('--progress', percentComplete+'%'); + $('#progress-text').html(`${percentComplete}%`); + //on complete if (percentComplete === 100) { fileReceiver.removeAllListeners('progress'); - btn.text('Download complete!'); - btn.attr('disabled', 'true'); + $('#download-text').html('Download complete!'); + $('.send-new').show(); + $btn.text('Download complete!'); + $btn.attr('disabled', 'true'); } }); diff --git a/frontend/src/upload.js b/frontend/src/upload.js index 72c02f36..dd66d659 100644 --- a/frontend/src/upload.js +++ b/frontend/src/upload.js @@ -3,25 +3,32 @@ const $ = require('jquery'); $(document).ready(function() { // reset copy button - let copyBtn = $('#copy-btn'); - copyBtn.attr('disabled', false); - copyBtn.html('Copy'); + let $copyBtn = $('#copy-btn'); + $copyBtn.attr('disabled', false); + $copyBtn.html('Copy'); $('#page-one').show(); $('#file-list').hide(); $('#upload-progress').hide(); $('#share-link').hide(); + //load existing uploads + for (fileId in localStorage){ + + } + // copy link to clipboard - copyBtn.click(() => { + $copyBtn.click(() => { var aux = document.createElement('input'); aux.setAttribute('value', $('#link').attr('value')); document.body.appendChild(aux); aux.select(); document.execCommand('copy'); document.body.removeChild(aux); - copyBtn.attr('disabled', true); - copyBtn.html('Copied!'); + //disable button for 3s + $copyBtn.attr('disabled', true) + $copyBtn.html('Copied!'); + }); // link back to home page @@ -30,8 +37,8 @@ $(document).ready(function() { $('#file-list').show(); $('#upload-progress').hide(); $('#share-link').hide(); - copyBtn.attr('disabled', false); - copyBtn.html('Copy'); + $copyBtn.attr('disabled', false); + $copyBtn.html('Copy'); }); // on file upload by browse or drag & drop @@ -49,11 +56,11 @@ $(document).ready(function() { let link = document.createElement('td'); let expiry = document.createElement('td'); let del = document.createElement('td'); + del.setAttribute('align', 'center'); 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); @@ -75,7 +82,6 @@ $(document).ready(function() { $(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 => { @@ -83,7 +89,9 @@ $(document).ready(function() { $('#file-list').hide(); $('#upload-progress').show(); $('#upload-filename').innerHTML += file.name; - progress.innerText = `Progress: ${percentComplete}%`; + // update progress bar + document.querySelector('#progress-bar').style.setProperty('--progress', percentComplete+'%'); + $('#progress-text').html(`${percentComplete}%`); }); fileSender.upload().then(info => { const url = info.url.trim() + `#${info.secretKey}`.trim(); @@ -96,17 +104,20 @@ $(document).ready(function() { FileSender.delete( info.fileId, localStorage.getItem(info.fileId) - ).then(() => { - // + ).then(() => { $(e.target).parents('tr').remove(); localStorage.removeItem(info.fileId); }); }); // show popup - btn.addEventListener('click', toggleShow); + del.addEventListener('click', toggleShow); // hide popup $popupText.find('.nvm').click(toggleShow); + + $fileList.append(row); //add row to table + $('#page-one').hide(); + $('#file-list').hide(); $('#upload-progress').hide(); $('#share-link').show(); }); diff --git a/public/main.css b/public/main.css index 38fd83e3..28c17bf4 100644 --- a/public/main.css +++ b/public/main.css @@ -43,6 +43,7 @@ input, select, textarea, button { justify-content: center; align-items: center; flex-direction: column; + text-align: center; } #browse { @@ -110,49 +111,55 @@ td { /* Popup container */ .popup { - position: relative; - display: inline-block; - cursor: pointer; + 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; - transition: opacity 0.5s; - opacity: 0; + 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; + transition: opacity 0.5s; + opacity: 0; } /* 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; + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: #555 transparent transparent transparent; } .popup .show { - visibility: visible; - opacity: 1; + visibility: visible; + opacity: 1; } /** upload-progress **/ - +#progress-bar { + width: 300px; + height: 5px; + background: linear-gradient(90deg, #FD9800, #D73000 var(--progress), white var(--progress)); + border: 0.5px solid; + border-radius: 5px; +} /** share-link **/ .share-window { @@ -233,10 +240,32 @@ td { cursor: auto; } -#download { +#download-page-one { + margin: 0 auto; + width: 470px; + height: 250px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; text-align: center; } #expired-img { display: none; } + +#download-progress { + margin: 0 auto; + width: 470px; + height: 250px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; +} + +#download-text { + margin-bottom: 40px; +} diff --git a/views/download.handlebars b/views/download.handlebars index e1fa05d4..f845e7c0 100644 --- a/views/download.handlebars +++ b/views/download.handlebars @@ -16,15 +16,29 @@ Your friend is sending you a file:
{{{filename}}} ({{{filesize}}}) - - + --> diff --git a/views/index.handlebars b/views/index.handlebars index 2cf237e5..f06b780f 100644 --- a/views/index.handlebars +++ b/views/index.handlebars @@ -52,6 +52,8 @@
+
+
From 4e040eece0e8c2d90d77ba50effdaf0dad03db9f Mon Sep 17 00:00:00 2001 From: Daniela Arcese Date: Tue, 20 Jun 2017 15:36:43 -0400 Subject: [PATCH 2/4] enable copy button again --- frontend/src/upload.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/src/upload.js b/frontend/src/upload.js index dd66d659..033f7233 100644 --- a/frontend/src/upload.js +++ b/frontend/src/upload.js @@ -28,7 +28,10 @@ $(document).ready(function() { //disable button for 3s $copyBtn.attr('disabled', true) $copyBtn.html('Copied!'); - + window.setTimeout(()=>{ + $copyBtn.attr('disabled', false); + $copyBtn.html('Copy'); + }, 3000); }); // link back to home page From d4413e6e6fcee4c25851a79a0ef0a30971788b68 Mon Sep 17 00:00:00 2001 From: Daniela Arcese Date: Tue, 20 Jun 2017 15:23:12 -0400 Subject: [PATCH 3/4] add progress bars --- frontend/src/download.js | 73 +++++++++++++++++++++------------------ frontend/src/upload.js | 37 +++++++++++++------- public/main.css | 32 ++++++++++++++++- views/download.handlebars | 24 ++++++++++--- views/index.handlebars | 2 ++ 5 files changed, 116 insertions(+), 52 deletions(-) diff --git a/frontend/src/download.js b/frontend/src/download.js index 5ad2fb3e..568c97de 100644 --- a/frontend/src/download.js +++ b/frontend/src/download.js @@ -2,53 +2,60 @@ const FileReceiver = require('./fileReceiver'); const $ = require('jquery'); $(document).ready(function() { + $('#download-progress').hide(); $('#send-file').click(() => { window.location.replace(`${window.location.origin}`); }); const download = () => { const fileReceiver = new FileReceiver(); const name = document.createElement('p'); - const progress = document.createElement('p'); - const btn = $('#download-btn'); + const $btn = $('#download-btn'); fileReceiver.on('progress', percentComplete => { - progress.innerText = `Progress: ${percentComplete}%`; - + $('#download-page-one').hide(); + $('.send-new').hide(); + $('#download-progress').show(); + // update progress bar + document.querySelector('#progress-bar').style.setProperty('--progress', percentComplete+'%'); + $('#progress-text').html(`${percentComplete}%`); + //on complete if (percentComplete === 100) { fileReceiver.removeAllListeners('progress'); - btn.text('Download complete!'); - btn.attr('disabled', 'true'); + $('#download-text').html('Download complete!'); + $('.send-new').show(); + $btn.text('Download complete!'); + $btn.attr('disabled', 'true'); } }); - + fileReceiver - .download() - .catch(() => { - $('.title').text( - 'This link has expired or never existed in the first place.' - ); - $('#download-btn').hide(); - $('#expired-img').show(); - console.log('The file has expired, or has already been deleted.'); - return; - }) - .then(([decrypted, fname]) => { - name.innerText = fname; - const dataView = new DataView(decrypted); - const blob = new Blob([dataView]); - const downloadUrl = URL.createObjectURL(blob); + .download() + .catch(() => { + $('.title').text( + 'This link has expired or never existed in the first place.' + ); + $('#download-btn').hide(); + $('#expired-img').show(); + console.log('The file has expired, or has already been deleted.'); + return; + }) + .then(([decrypted, fname]) => { + name.innerText = fname; + const dataView = new DataView(decrypted); + const blob = new Blob([dataView]); + const downloadUrl = URL.createObjectURL(blob); - const a = document.createElement('a'); - a.href = downloadUrl; - if (window.navigator.msSaveBlob) { - // if we are in microsoft edge or IE - window.navigator.msSaveBlob(blob, fname); - return; - } - a.download = fname; - document.body.appendChild(a); - a.click(); - }); + const a = document.createElement('a'); + a.href = downloadUrl; + if (window.navigator.msSaveBlob) { + // if we are in microsoft edge or IE + window.navigator.msSaveBlob(blob, fname); + return; + } + a.download = fname; + document.body.appendChild(a); + a.click(); + }); }; window.download = download; diff --git a/frontend/src/upload.js b/frontend/src/upload.js index 17d4a3b8..bf14f95b 100644 --- a/frontend/src/upload.js +++ b/frontend/src/upload.js @@ -3,9 +3,9 @@ const $ = require('jquery'); $(document).ready(function() { // reset copy button - const copyBtn = $('#copy-btn'); - copyBtn.attr('disabled', false); - copyBtn.html('Copy'); + const $copyBtn = $('#copy-btn'); + $copyBtn.attr('disabled', false); + $copyBtn.html('Copy'); $('#page-one').show(); $('#file-list').hide(); @@ -13,15 +13,20 @@ $(document).ready(function() { $('#share-link').hide(); // copy link to clipboard - copyBtn.click(() => { - const aux = document.createElement('input'); + $copyBtn.click(() => { + var aux = document.createElement('input'); aux.setAttribute('value', $('#link').attr('value')); document.body.appendChild(aux); aux.select(); document.execCommand('copy'); document.body.removeChild(aux); - copyBtn.attr('disabled', true); - copyBtn.html('Copied!'); + //disable button for 3s + $copyBtn.attr('disabled', true) + $copyBtn.html('Copied!'); + window.setTimeout(()=>{ + $copyBtn.attr('disabled', false); + $copyBtn.html('Copy'); + }, 3000); }); // link back to home page @@ -30,8 +35,8 @@ $(document).ready(function() { $('#file-list').show(); $('#upload-progress').hide(); $('#share-link').hide(); - copyBtn.attr('disabled', false); - copyBtn.html('Copy'); + $copyBtn.attr('disabled', false); + $copyBtn.html('Copy'); }); // on file upload by browse or drag & drop @@ -43,12 +48,14 @@ $(document).ready(function() { } else { file = event.target.files[0]; } + const $fileList = $('#uploaded-files'); const row = document.createElement('tr'); const name = document.createElement('td'); const link = document.createElement('td'); const expiry = document.createElement('td'); const del = document.createElement('td'); + del.setAttribute('align', 'center'); const btn = document.createElement('button'); const popupDiv = document.createElement('div'); const $popupText = $('', { class: 'popuptext' }); @@ -75,7 +82,6 @@ $(document).ready(function() { $(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 => { @@ -83,7 +89,9 @@ $(document).ready(function() { $('#file-list').hide(); $('#upload-progress').show(); $('#upload-filename').innerHTML += file.name; - progress.innerText = `Progress: ${percentComplete}%`; + // update progress bar + document.querySelector('#progress-bar').style.setProperty('--progress', percentComplete+'%'); + $('#progress-text').html(`${percentComplete}%`); }); fileSender.upload().then(info => { const url = info.url.trim() + `#${info.secretKey}`.trim(); @@ -97,16 +105,19 @@ $(document).ready(function() { info.fileId, localStorage.getItem(info.fileId) ).then(() => { - // $(e.target).parents('tr').remove(); localStorage.removeItem(info.fileId); }); }); // show popup - btn.addEventListener('click', toggleShow); + del.addEventListener('click', toggleShow); // hide popup $popupText.find('.nvm').click(toggleShow); + + $fileList.append(row); //add row to table + $('#page-one').hide(); + $('#file-list').hide(); $('#upload-progress').hide(); $('#share-link').show(); }); diff --git a/public/main.css b/public/main.css index 2bd1ae1f..ae45ecd0 100644 --- a/public/main.css +++ b/public/main.css @@ -43,6 +43,7 @@ input, select, textarea, button { justify-content: center; align-items: center; flex-direction: column; + text-align: center; } #browse { @@ -151,6 +152,13 @@ td { } /** upload-progress **/ +#progress-bar { + width: 300px; + height: 5px; + background: linear-gradient(90deg, #FD9800, #D73000 var(--progress), white var(--progress)); + border: 0.5px solid; + border-radius: 5px; +} /** share-link **/ .share-window { @@ -230,10 +238,32 @@ td { cursor: auto; } -#download { +#download-page-one { + margin: 0 auto; + width: 470px; + height: 250px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; text-align: center; } #expired-img { display: none; } + +#download-progress { + margin: 0 auto; + width: 470px; + height: 250px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; +} + +#download-text { + margin-bottom: 40px; +} diff --git a/views/download.handlebars b/views/download.handlebars index da97535f..7067999b 100644 --- a/views/download.handlebars +++ b/views/download.handlebars @@ -16,15 +16,29 @@ Your friend is sending you a file:
{{{filename}}} ({{{filesize}}}) - - + --> diff --git a/views/index.handlebars b/views/index.handlebars index 9dd4a70f..ab0292f9 100644 --- a/views/index.handlebars +++ b/views/index.handlebars @@ -54,6 +54,8 @@
Upload
+
+
From ae3e18c443f407823b45fa1f1815c1f5b302ba2b Mon Sep 17 00:00:00 2001 From: Daniela Arcese Date: Tue, 20 Jun 2017 15:52:01 -0400 Subject: [PATCH 4/4] format --- frontend/src/download.js | 56 +++++++++++++++++++++------------------- frontend/src/upload.js | 8 +++--- public/main.css | 7 ++++- server/portal_server.js | 19 ++++++++------ server/storage.js | 2 +- 5 files changed, 52 insertions(+), 40 deletions(-) diff --git a/frontend/src/download.js b/frontend/src/download.js index 545ae82c..65045433 100644 --- a/frontend/src/download.js +++ b/frontend/src/download.js @@ -16,7 +16,9 @@ $(document).ready(function() { $('.send-new').hide(); $('#download-progress').show(); // update progress bar - document.querySelector('#progress-bar').style.setProperty('--progress', percentComplete+'%'); + document + .querySelector('#progress-bar') + .style.setProperty('--progress', percentComplete + '%'); $('#progress-text').html(`${percentComplete}%`); //on complete if (percentComplete === 100) { @@ -29,33 +31,33 @@ $(document).ready(function() { }); fileReceiver - .download() - .catch(() => { - $('.title').text( - 'This link has expired or never existed in the first place.' - ); - $('#download-btn').hide(); - $('#expired-img').show(); - console.log('The file has expired, or has already been deleted.'); - return; - }) - .then(([decrypted, fname]) => { - name.innerText = fname; - const dataView = new DataView(decrypted); - const blob = new Blob([dataView]); - const downloadUrl = URL.createObjectURL(blob); - - const a = document.createElement('a'); - a.href = downloadUrl; - if (window.navigator.msSaveBlob) { - // if we are in microsoft edge or IE - window.navigator.msSaveBlob(blob, fname); + .download() + .catch(() => { + $('.title').text( + 'This link has expired or never existed in the first place.' + ); + $('#download-btn').hide(); + $('#expired-img').show(); + console.log('The file has expired, or has already been deleted.'); return; - } - a.download = fname; - document.body.appendChild(a); - a.click(); - }); + }) + .then(([decrypted, fname]) => { + name.innerText = fname; + const dataView = new DataView(decrypted); + const blob = new Blob([dataView]); + const downloadUrl = URL.createObjectURL(blob); + + const a = document.createElement('a'); + a.href = downloadUrl; + if (window.navigator.msSaveBlob) { + // if we are in microsoft edge or IE + window.navigator.msSaveBlob(blob, fname); + return; + } + a.download = fname; + document.body.appendChild(a); + a.click(); + }); }; window.download = download; diff --git a/frontend/src/upload.js b/frontend/src/upload.js index bf14f95b..3bc586a7 100644 --- a/frontend/src/upload.js +++ b/frontend/src/upload.js @@ -21,9 +21,9 @@ $(document).ready(function() { document.execCommand('copy'); document.body.removeChild(aux); //disable button for 3s - $copyBtn.attr('disabled', true) + $copyBtn.attr('disabled', true); $copyBtn.html('Copied!'); - window.setTimeout(()=>{ + window.setTimeout(() => { $copyBtn.attr('disabled', false); $copyBtn.html('Copy'); }, 3000); @@ -90,7 +90,9 @@ $(document).ready(function() { $('#upload-progress').show(); $('#upload-filename').innerHTML += file.name; // update progress bar - document.querySelector('#progress-bar').style.setProperty('--progress', percentComplete+'%'); + document + .querySelector('#progress-bar') + .style.setProperty('--progress', percentComplete + '%'); $('#progress-text').html(`${percentComplete}%`); }); fileSender.upload().then(info => { diff --git a/public/main.css b/public/main.css index ae45ecd0..d97ea06a 100644 --- a/public/main.css +++ b/public/main.css @@ -155,7 +155,12 @@ td { #progress-bar { width: 300px; height: 5px; - background: linear-gradient(90deg, #FD9800, #D73000 var(--progress), white var(--progress)); + background: linear-gradient( + 90deg, + #FD9800, + #D73000 var(--progress), + white var(--progress) + ); border: 0.5px solid; border-radius: 5px; } diff --git a/server/portal_server.js b/server/portal_server.js index c6f74c68..2c16ee3d 100644 --- a/server/portal_server.js +++ b/server/portal_server.js @@ -71,13 +71,16 @@ app.get('/assets/download/:id', (req, res) => { const file_stream = storage.get(id); file_stream.on(notLocalHost ? 'finish' : 'close', () => { - storage.forceDelete(id).then(err => { - if (!err) { - log.info('Deleted:', id); - } - }).catch(err => { - log.info('DeleteError:', id); - }); + storage + .forceDelete(id) + .then(err => { + if (!err) { + log.info('Deleted:', id); + } + }) + .catch(err => { + log.info('DeleteError:', id); + }); }); file_stream.pipe(res); @@ -104,7 +107,7 @@ app.post('/delete/:id', (req, res) => { storage .delete(id, delete_token) - .then((err) => { + .then(err => { if (!err) { log.info('Deleted:', id); res.sendStatus(200); diff --git a/server/storage.js b/server/storage.js index 93d02791..e3af4440 100644 --- a/server/storage.js +++ b/server/storage.js @@ -145,7 +145,7 @@ function awsGet(id) { try { return s3.getObject(params).createReadStream(); - } catch(err) { + } catch (err) { log.info('GetFailed', 'Get Object from s3 failed.'); return null; }