dylan.derr/Send
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add progress bars

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

73
frontend/src/download.js
View file

@ -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;

37
frontend/src/upload.js
View file

@ -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 = $('<span>', { 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();
});