natty
/
fox-send
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add progress bars

This commit is contained in:
Daniela Arcese 2017-06-20 15:23:12 -04:00
parent 2bb0c7eb4b
commit d4413e6e6f
5 changed files with 116 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/src/download.js
View File

@ -2,53 +2,60 @@ const FileReceiver = require('./fileReceiver');
const $ = require('jquery'); const $ = require('jquery');
$(document).ready(function() { $(document).ready(function() {
$('#download-progress').hide();
$('#send-file').click(() => { $('#send-file').click(() => {
window.location.replace(`${window.location.origin}`); window.location.replace(`${window.location.origin}`);
}); });
const download = () => { const download = () => {
const fileReceiver = new FileReceiver(); const fileReceiver = new FileReceiver();
const name = document.createElement('p'); const name = document.createElement('p');
const progress = document.createElement('p'); const $btn = $('#download-btn');
const btn = $('#download-btn');
fileReceiver.on('progress', percentComplete => { 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) { if (percentComplete === 100) {
fileReceiver.removeAllListeners('progress'); fileReceiver.removeAllListeners('progress');
btn.text('Download complete!'); $('#download-text').html('Download complete!');
btn.attr('disabled', 'true'); $('.send-new').show();
$btn.text('Download complete!');
$btn.attr('disabled', 'true');
} }
}); });
fileReceiver fileReceiver
.download() .download()
.catch(() => { .catch(() => {
$('.title').text( $('.title').text(
'This link has expired or never existed in the first place.' 'This link has expired or never existed in the first place.'
); );
$('#download-btn').hide(); $('#download-btn').hide();
$('#expired-img').show(); $('#expired-img').show();
console.log('The file has expired, or has already been deleted.'); console.log('The file has expired, or has already been deleted.');
return; return;
}) })
.then(([decrypted, fname]) => { .then(([decrypted, fname]) => {
name.innerText = fname; name.innerText = fname;
const dataView = new DataView(decrypted); const dataView = new DataView(decrypted);
const blob = new Blob([dataView]); const blob = new Blob([dataView]);
const downloadUrl = URL.createObjectURL(blob); const downloadUrl = URL.createObjectURL(blob);
const a = document.createElement('a'); const a = document.createElement('a');
a.href = downloadUrl; a.href = downloadUrl;
if (window.navigator.msSaveBlob) { if (window.navigator.msSaveBlob) {
// if we are in microsoft edge or IE // if we are in microsoft edge or IE
window.navigator.msSaveBlob(blob, fname); window.navigator.msSaveBlob(blob, fname);
return; return;
} }
a.download = fname; a.download = fname;
document.body.appendChild(a); document.body.appendChild(a);
a.click(); a.click();
}); });
}; };
window.download = download; window.download = download;

37
frontend/src/upload.js
View File

@ -3,9 +3,9 @@ const $ = require('jquery');
$(document).ready(function() { $(document).ready(function() {
// reset copy button // reset copy button
const copyBtn = $('#copy-btn'); const $copyBtn = $('#copy-btn');
copyBtn.attr('disabled', false); $copyBtn.attr('disabled', false);
copyBtn.html('Copy'); $copyBtn.html('Copy');
$('#page-one').show(); $('#page-one').show();
$('#file-list').hide(); $('#file-list').hide();
@ -13,15 +13,20 @@ $(document).ready(function() {
$('#share-link').hide(); $('#share-link').hide();
// copy link to clipboard // copy link to clipboard
copyBtn.click(() => { $copyBtn.click(() => {
const aux = document.createElement('input'); var aux = document.createElement('input');
aux.setAttribute('value', $('#link').attr('value')); aux.setAttribute('value', $('#link').attr('value'));
document.body.appendChild(aux); document.body.appendChild(aux);
aux.select(); aux.select();
document.execCommand('copy'); document.execCommand('copy');
document.body.removeChild(aux); document.body.removeChild(aux);
copyBtn.attr('disabled', true); //disable button for 3s
copyBtn.html('Copied!'); $copyBtn.attr('disabled', true)
$copyBtn.html('Copied!');
window.setTimeout(()=>{
$copyBtn.attr('disabled', false);
$copyBtn.html('Copy');
}, 3000);
}); });
// link back to home page // link back to home page
@ -30,8 +35,8 @@ $(document).ready(function() {
$('#file-list').show(); $('#file-list').show();
$('#upload-progress').hide(); $('#upload-progress').hide();
$('#share-link').hide(); $('#share-link').hide();
copyBtn.attr('disabled', false); $copyBtn.attr('disabled', false);
copyBtn.html('Copy'); $copyBtn.html('Copy');
}); });
// on file upload by browse or drag & drop // on file upload by browse or drag & drop
@ -43,12 +48,14 @@ $(document).ready(function() {
} else { } else {
file = event.target.files[0]; file = event.target.files[0];
} }
const $fileList = $('#uploaded-files'); const $fileList = $('#uploaded-files');
const row = document.createElement('tr'); const row = document.createElement('tr');
const name = document.createElement('td'); const name = document.createElement('td');
const link = document.createElement('td'); const link = document.createElement('td');
const expiry = document.createElement('td'); const expiry = document.createElement('td');
const del = document.createElement('td'); const del = document.createElement('td');
del.setAttribute('align', 'center');
const btn = document.createElement('button'); const btn = document.createElement('button');
const popupDiv = document.createElement('div'); const popupDiv = document.createElement('div');
const $popupText = $('<span>', { class: 'popuptext' }); const $popupText = $('<span>', { class: 'popuptext' });
@ -75,7 +82,6 @@ $(document).ready(function() {
$(popupDiv).append($popupText); $(popupDiv).append($popupText);
del.appendChild(popupDiv); del.appendChild(popupDiv);
row.appendChild(del); row.appendChild(del);
$fileList.append(row); //add row to table
const fileSender = new FileSender(file); const fileSender = new FileSender(file);
fileSender.on('progress', percentComplete => { fileSender.on('progress', percentComplete => {
@ -83,7 +89,9 @@ $(document).ready(function() {
$('#file-list').hide(); $('#file-list').hide();
$('#upload-progress').show(); $('#upload-progress').show();
$('#upload-filename').innerHTML += file.name; $('#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 => { fileSender.upload().then(info => {
const url = info.url.trim() + `#${info.secretKey}`.trim(); const url = info.url.trim() + `#${info.secretKey}`.trim();
@ -97,16 +105,19 @@ $(document).ready(function() {
info.fileId, info.fileId,
localStorage.getItem(info.fileId) localStorage.getItem(info.fileId)
).then(() => { ).then(() => {
//
$(e.target).parents('tr').remove(); $(e.target).parents('tr').remove();
localStorage.removeItem(info.fileId); localStorage.removeItem(info.fileId);
}); });
}); });
// show popup // show popup
btn.addEventListener('click', toggleShow); del.addEventListener('click', toggleShow);
// hide popup // hide popup
$popupText.find('.nvm').click(toggleShow); $popupText.find('.nvm').click(toggleShow);
$fileList.append(row); //add row to table
$('#page-one').hide();
$('#file-list').hide();
$('#upload-progress').hide(); $('#upload-progress').hide();
$('#share-link').show(); $('#share-link').show();
}); });

32
public/main.css
View File

@ -43,6 +43,7 @@ input, select, textarea, button {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
text-align: center;
} }
#browse { #browse {
@ -151,6 +152,13 @@ td {
} }
/** upload-progress **/ /** 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-link **/
.share-window { .share-window {
@ -230,10 +238,32 @@ td {
cursor: auto; 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; text-align: center;
} }
#expired-img { #expired-img {
display: none; 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;
}

24
views/download.handlebars
View File

@ -16,15 +16,29 @@
Your friend is sending you a file: <br /> Your friend is sending you a file: <br />
{{{filename}}} ({{{filesize}}}) {{{filename}}} ({{{filesize}}})
</div> </div>
<div id="download-page-one">
<div class="share-window"> <div>
<button id="download-btn" onclick="download()">Download File</button> <button id="download-btn" onclick="download()">Download File</button>
<img id="expired-img" src="/resources/link_expired.png" alt="Link expired" /> </div>
</div> </div>
<div id="download-progress">
<div id="download-text">
Downloading File...
</div>
<div class="upload">
<!-- progress bar here -->
<div id="progress-bar"></div>
<div id="progress-text"></div>
</div>
</div>
<div class="send-new" id="send-file"> <div class="send-new" id="send-file">
Send your own files Send your own files
</div> </div>
{{else}} {{else}}
<div class="title"> <div class="title">
This link has expired or never existed in the first place. This link has expired or never existed in the first place.
</div> </div>
@ -42,7 +56,7 @@
</div> </div>
<!-- <ul id="downloaded_files"> <!-- <ul id="downloaded_files">
</ul> --> </ul> -->
</body> </body>
</html> </html>

2
views/index.handlebars
View File

@ -54,6 +54,8 @@
<div id="upload-img"><img src="/resources/upload.svg" alt="Upload" /></div> <div id="upload-img"><img src="/resources/upload.svg" alt="Upload" /></div>
<div class="upload"> <div class="upload">
<!-- progress bar here --> <!-- progress bar here -->
<div id="progress-bar"></div>
<div id="progress-text"></div>
</div> </div>
</div> </div>
</div> </div>