add download page and share link ui
This commit is contained in:
Daniela Arcese
parent
7da6a953b6
commit
a71161bf20
7 changed files with 310 additions and 123 deletions
|
|
@ -1,53 +1,64 @@
|
|||
const FileReceiver = require('./fileReceiver');
|
||||
|
||||
let download = () => {
|
||||
const fileReceiver = new FileReceiver();
|
||||
|
||||
let li = document.createElement('li');
|
||||
let name = document.createElement('p');
|
||||
li.appendChild(name);
|
||||
let progress = document.createElement('p');
|
||||
li.appendChild(progress);
|
||||
|
||||
document.getElementById('downloaded_files').appendChild(li);
|
||||
|
||||
fileReceiver.on('progress', percentComplete => {
|
||||
progress.innerText = `Progress: ${percentComplete}%`;
|
||||
|
||||
if (percentComplete === 100) {
|
||||
fileReceiver.removeAllListeners('progress');
|
||||
|
||||
let finished = document.createElement('p');
|
||||
finished.innerText = 'Your download has finished.';
|
||||
li.appendChild(finished);
|
||||
|
||||
let close = document.createElement('button');
|
||||
close.innerText = 'Ok';
|
||||
close.addEventListener('click', () => {
|
||||
document.getElementById('downloaded_files').removeChild(li);
|
||||
});
|
||||
li.appendChild(close);
|
||||
}
|
||||
$(document).ready(function(){
|
||||
$('.send-new').click(()=>{
|
||||
window.location.replace(`${window.location.origin}`);
|
||||
});
|
||||
let download = () => {
|
||||
const fileReceiver = new FileReceiver();
|
||||
|
||||
fileReceiver.download()
|
||||
.catch((err) => {
|
||||
console.log('The file has expired, or has already been deleted.');
|
||||
document.getElementById('downloaded_files').removeChild(li);
|
||||
return;
|
||||
})
|
||||
.then(([decrypted, fname]) => {
|
||||
name.innerText = fname;
|
||||
let dataView = new DataView(decrypted);
|
||||
let blob = new Blob([dataView]);
|
||||
let downloadUrl = URL.createObjectURL(blob);
|
||||
let li = document.createElement('li');
|
||||
let name = document.createElement('p');
|
||||
let progress = document.createElement('p');
|
||||
let btn = $('#download-btn');
|
||||
|
||||
let a = document.createElement('a');
|
||||
a.href = downloadUrl;
|
||||
a.download = fname;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
});
|
||||
};
|
||||
// li.appendChild(name);
|
||||
// li.appendChild(progress);
|
||||
|
||||
window.download = download;
|
||||
//document.getElementById('downloaded_files').appendChild(li);
|
||||
|
||||
fileReceiver.on('progress', percentComplete => {
|
||||
progress.innerText = `Progress: ${percentComplete}%`;
|
||||
|
||||
if (percentComplete === 100) {
|
||||
fileReceiver.removeAllListeners('progress');
|
||||
btn.text('Download complete!');
|
||||
btn.attr("disabled", "true");
|
||||
// let finished = document.createElement('p');
|
||||
// finished.innerText = 'Your download has finished.';
|
||||
// li.appendChild(finished);
|
||||
|
||||
// let close = document.createElement('button');
|
||||
// close.innerText = 'Ok';
|
||||
// close.addEventListener('click', () => {
|
||||
// document.getElementById('downloaded_files').removeChild(li);
|
||||
// });
|
||||
// li.appendChild(close);
|
||||
}
|
||||
});
|
||||
|
||||
fileReceiver.download()
|
||||
.catch((err) => {
|
||||
$('.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.');
|
||||
// document.getElementById('downloaded_files').removeChild(li);
|
||||
return;
|
||||
})
|
||||
.then(([decrypted, fname]) => {
|
||||
name.innerText = fname;
|
||||
let dataView = new DataView(decrypted);
|
||||
let blob = new Blob([dataView]);
|
||||
let downloadUrl = URL.createObjectURL(blob);
|
||||
|
||||
let a = document.createElement('a');
|
||||
a.href = downloadUrl;
|
||||
a.download = fname;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
});
|
||||
};
|
||||
|
||||
window.download = download;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,50 +1,87 @@
|
|||
const FileSender = require('./fileSender');
|
||||
|
||||
let onChange = event => {
|
||||
const file = event.target.files[0];
|
||||
$(document).ready(function(){
|
||||
let copyBtn = $('#copy-btn');
|
||||
copyBtn.attr("disabled", false);
|
||||
copyBtn.html("Copy");
|
||||
$('#page-one').show();
|
||||
$('#file-list').hide();
|
||||
$('#upload-progress').hide();
|
||||
$('#share-link').hide();
|
||||
|
||||
let fileList = document.getElementById('uploaded-files');
|
||||
let row = document.createElement('tr');
|
||||
let name = document.createElement('td');
|
||||
let link = document.createElement('td');
|
||||
let expiry = document.createElement('td');
|
||||
|
||||
let cellText = document.createTextNode(file.name);
|
||||
|
||||
name.appendChild(cellText);
|
||||
|
||||
let progress = document.createElement('p');
|
||||
|
||||
row.appendChild(name);
|
||||
row.appendChild(link);
|
||||
row.appendChild(expiry);
|
||||
fileList.appendChild(row);
|
||||
|
||||
const fileSender = new FileSender(file);
|
||||
fileSender.on('progress', percentComplete => {
|
||||
progress.innerText = `Progress: ${percentComplete}%`;
|
||||
copyBtn.click(()=>{
|
||||
console.log("copied");
|
||||
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!");
|
||||
});
|
||||
fileSender.upload().then(info => {
|
||||
const url = `${window.location
|
||||
.origin}/download/${info.fileId}/#${info.secretKey}`;
|
||||
link.innerHTML = url;
|
||||
localStorage.setItem(info.fileId, info.deleteToken);
|
||||
let del = document.createElement('td');
|
||||
let btn = document.createElement('button');
|
||||
btn.innerHTML = 'x';
|
||||
btn.classList.add('delete-btn');
|
||||
btn.addEventListener('click', () => {
|
||||
FileSender.delete(
|
||||
info.fileId,
|
||||
localStorage.getItem(info.fileId)
|
||||
).then(() => {
|
||||
fileList.removeChild(row);
|
||||
localStorage.removeItem(info.fileId);
|
||||
});
|
||||
$('.send-new').click(()=>{
|
||||
$('#page-one').show();
|
||||
$('#file-list').show();
|
||||
$('#upload-progress').hide();
|
||||
$('#share-link').hide();
|
||||
copyBtn.attr("disabled", false);
|
||||
copyBtn.html("Copy");
|
||||
});
|
||||
|
||||
let onChange = event => {
|
||||
const file = event.target.files[0];
|
||||
|
||||
let fileList = $('#uploaded-files');
|
||||
let row = document.createElement('tr');
|
||||
let name = document.createElement('td');
|
||||
let link = document.createElement('td');
|
||||
let expiry = document.createElement('td');
|
||||
|
||||
let cellText = document.createTextNode(file.name);
|
||||
|
||||
name.appendChild(cellText);
|
||||
|
||||
let progress = document.createElement('p');
|
||||
|
||||
row.appendChild(name);
|
||||
row.appendChild(link);
|
||||
row.appendChild(expiry);
|
||||
fileList.append(row);
|
||||
|
||||
const fileSender = new FileSender(file);
|
||||
fileSender.on('progress', percentComplete => {
|
||||
$('#page-one').hide();
|
||||
$('#file-list').hide();
|
||||
$('#upload-progress').show();
|
||||
$('#upload-filename').innerHTML += file.name;
|
||||
progress.innerText = `Progress: ${percentComplete}%`;
|
||||
});
|
||||
del.appendChild(btn);
|
||||
row.appendChild(del);
|
||||
});
|
||||
};
|
||||
fileSender.upload().then(info => {
|
||||
const url = `${window.location
|
||||
.origin}/download/${info.fileId}/#${info.secretKey}`;
|
||||
$('#link').attr("value", url);
|
||||
link.innerHTML = url;
|
||||
localStorage.setItem(info.fileId, info.deleteToken);
|
||||
let del = document.createElement('td');
|
||||
let btn = document.createElement('button');
|
||||
btn.innerHTML = 'x';
|
||||
btn.classList.add('delete-btn');
|
||||
btn.addEventListener('click', (e) => {
|
||||
FileSender.delete(
|
||||
info.fileId,
|
||||
localStorage.getItem(info.fileId)
|
||||
).then(() => {
|
||||
e.target.parentNode.parentNode.remove();
|
||||
localStorage.removeItem(info.fileId);
|
||||
});
|
||||
});
|
||||
del.appendChild(btn);
|
||||
row.appendChild(del);
|
||||
$('#upload-progress').hide();
|
||||
$('#share-link').show();
|
||||
});
|
||||
};
|
||||
|
||||
window.onChange = onChange;
|
||||
window.onChange = onChange;
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue