From d4413e6e6fcee4c25851a79a0ef0a30971788b68 Mon Sep 17 00:00:00 2001 From: Daniela Arcese Date: Tue, 20 Jun 2017 15:23:12 -0400 Subject: [PATCH] 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
+
+