add progress bars
This commit is contained in:
Daniela Arcese
parent
2bb0c7eb4b
commit
d4413e6e6f
@ -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;
|
||||
|
||||
@ -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();
|
||||
});
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -16,15 +16,29 @@
|
||||
Your friend is sending you a file: <br />
|
||||
{{{filename}}} ({{{filesize}}})
|
||||
</div>
|
||||
|
||||
<div class="share-window">
|
||||
<button id="download-btn" onclick="download()">Download File</button>
|
||||
<img id="expired-img" src="/resources/link_expired.png" alt="Link expired" />
|
||||
<div id="download-page-one">
|
||||
<div>
|
||||
<button id="download-btn" onclick="download()">Download File</button>
|
||||
</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">
|
||||
Send your own files
|
||||
</div>
|
||||
|
||||
{{else}}
|
||||
|
||||
<div class="title">
|
||||
This link has expired or never existed in the first place.
|
||||
</div>
|
||||
@ -42,7 +56,7 @@
|
||||
</div>
|
||||
|
||||
<!-- <ul id="downloaded_files">
|
||||
</ul> -->
|
||||
</ul> -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -54,6 +54,8 @@
|
||||
<div id="upload-img"><img src="/resources/upload.svg" alt="Upload" /></div>
|
||||
<div class="upload">
|
||||
<!-- progress bar here -->
|
||||
<div id="progress-bar"></div>
|
||||
<div id="progress-text"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user