mentos1386/send
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Merge pull request #46 from mozilla/ui

Browse source 
Download page and share link UI
This commit is contained in:
Danny Coates 2017-06-06 15:12:34 -07:00 committed by GitHub
commit 0677603d74
9 changed files with 373 additions and 186 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
frontend/src/download.js
View file

@ -1,53 +1,67 @@
const FileReceiver = require('./fileReceiver');
let download = () => {
const fileReceiver = new FileReceiver();
$(document).ready(function() {
$('#send-file').click(() => {
window.location.replace(`${window.location.origin}`);
});
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);
let li = document.createElement('li');
let name = document.createElement('p');
let progress = document.createElement('p');
let btn = $('#download-btn');
document.getElementById('downloaded_files').appendChild(li);
// li.appendChild(name);
// li.appendChild(progress);
fileReceiver.on('progress', percentComplete => {
progress.innerText = `Progress: ${percentComplete}%`;
//document.getElementById('downloaded_files').appendChild(li);
if (percentComplete === 100) {
fileReceiver.removeAllListeners('progress');
fileReceiver.on('progress', percentComplete => {
progress.innerText = `Progress: ${percentComplete}%`;
let finished = document.createElement('p');
finished.innerText = 'Your download has finished.';
li.appendChild(finished);
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);
// 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();
});
li.appendChild(close);
}
});
};
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 a = document.createElement('a');
a.href = downloadUrl;
a.download = fname;
document.body.appendChild(a);
a.click();
});
};
window.download = download;
window.download = download;
});

8
frontend/src/fileReceiver.js
View file

@ -20,9 +20,10 @@ class FileReceiver extends EventEmitter {
};
xhr.onload = function(e) {
if (xhr.status === 404) {
reject(new Error('The file has expired, or has already been deleted.'));
reject(
new Error('The file has expired, or has already been deleted.')
);
return;
}
@ -58,8 +59,7 @@ class FileReceiver extends EventEmitter {
true,
['encrypt', 'decrypt']
)
])
.then(([fdata, key]) => {
]).then(([fdata, key]) => {
let salt = this.salt;
return Promise.all([
window.crypto.subtle.decrypt(

125
frontend/src/upload.js
View file

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

28
public/download.html
View file

@ -1,15 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<title>Download your file</title>
<script type="text/javascript" src="/bundle.js"></script>
<title>Download your file</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/bundle.js"></script>
<link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">
<link rel="stylesheet" type="text/css" href="/main.css" />
</head>
<body>
<button onclick="download()">DOWNLOAD</button>
<div class="main-window">
<div id="download">
<div class="title">
Your friend is sending you a file:
</div>
<div class="share-window">
<button id="download-btn" onclick="download()">Download File</button>
<img id="expired-img" src="/resources/link_expired.png"/>
</div>
<div class="send-new" id="send-file">
Send your own files
</div>
</div>
</div>
<ul id="downloaded_files">
</ul>
<!-- <ul id="downloaded_files">
</ul> -->
</body>
</html>
</html>

48
public/index.html
View file

@ -2,9 +2,10 @@
<html>
<head>
<title>Firefox Fileshare</title>
<script src="bundle.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/bundle.js"></script>
<link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="/main.css" />
</head>
<body>
@ -14,7 +15,7 @@
Share your files quickly, privately and securely.
</div>
<div class="upload-window">
<div id="upload-img"><img src="resources/upload.svg"/></div>
<div id="upload-img"><img src="/resources/upload.svg"/></div>
<div>
DRAG &amp; DROP
</div>
@ -24,7 +25,7 @@
</div>
<div id="browse">
<form method="post" action="upload" enctype="multipart/form-data">
<label for="file-upload" class="file-upload">browse.</label>
<label for="file-upload" class="file-upload">browse</label>
<input id="file-upload" type="file" onchange="onChange(event)" name="fileUploaded" />
</form>
</div>
@ -37,12 +38,47 @@
<tr>
<th width=30%>File</th>
<th width=45%>Copy URL</th>
<th width=20%>Expires in</th>
<th width=5%>Delete</th>
<th width=18%>Expires in</th>
<th width=7%>Delete</th>
</tr>
<div data-role="popup" id="popupArrow" data-arrow="true">
</table>
</div>
<div id="upload-progress">
<div class="title" id="upload-filename">
Uploading
</div>
<div class="upload-window">
<div id="upload-img"><img src="/resources/upload.svg"/></div>
<div class="upload">
<!-- progress bar here -->
</div>
</div>
</div>
<div id="share-link">
<div class="title">
Copy the link below to share your file!
</div>
<div class="share-window">
<img src="/resources/share.png"/>
<div id="share-window-r">
<div id="copy">
<input id="link" type="url" value="" readonly/>
<button id="copy-btn">Copy</button>
</div>
<div>
This link expires after one download
</div>
</div>
</div>
<div class="send-new">
Send another file
</div>
</div>
</div>
</body>
</html>

127
public/main.css
View file

@ -1,32 +1,35 @@
/*** index.html ***/
/** page-one **/
body {
html {
background: url('resources/background.png');
font-family: 'Fira Sans';
font-weight: 300;
font-style: normal;
background-size: cover;
background-size: contain;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-direction: column;
}
input, select, textarea, button {
font-family:inherit;
}
/** page-one **/
.main-window {
border: 1px solid;
width: 606px;
height: 447px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
min-height: 447px;
background-color: white;
border-radius: 5px;
}
.title {
font-size: 14px;
width: 50%;
margin: 50px auto ;
width: 80%;
margin: 50px auto;
text-align: center;
}
.upload-window {
@ -44,7 +47,7 @@ body {
#browse {
float: right;
color: blue;
color: #2D7EFF;
}
#browse-text {
@ -96,12 +99,6 @@ td {
width: 472px;
margin: 10px auto ;
table-layout: fixed;
overflow-y: scroll;
}
#file-list {
overflow-y: scroll;
height: 90px;
}
.delete-btn {
@ -110,3 +107,93 @@ td {
background: none;
cursor: pointer;
}
/** upload-progress **/
/** share-link **/
.share-window {
width: 50%;
margin: 0 auto;
width: 470px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
}
#share-window-r {
width: 50%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#share-window-r>div {
font-size: 12px;
padding-bottom: 10px;
}
#copy {
display: flex;
flex-wrap: nowrap;
}
#link {
width: 216px;
height: 41px;
border: 1px solid #979797;
}
#copy-btn {
width: 60px;
height: 45px;
background: #337FEB;
border: 1px solid #979797;
color: white;
cursor: pointer;
}
#copy-btn:disabled {
background: #47B04B;
cursor: auto;
}
.send-new {
font-size: 14px;
margin: auto;
width: 80%;
text-align: center;
color: #2D7EFF;
cursor: pointer;
}
/** download.html **/
#download-btn {
font-size: 18px;
color: white;
width: 214px;
height: 87px;
margin: 50px auto;
text-align: center;
background: #337FEB;
border: 1px solid #3EA050;
border-radius: 6px;
font-weight: 300;
cursor: pointer;
}
#download-btn:disabled {
background: #47B04B;
cursor: auto;
}
#download {
text-align: center;
}
#expired-img {
display: none;
}

BIN
public/resources/link_expired.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
public/resources/share.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

123
server/portal_server.js
View file

@ -1,115 +1,112 @@
const express = require("express")
const busboy = require("connect-busboy");
const path = require("path");
const fs = require("fs-extra");
const bodyParser = require("body-parser");
const crypto = require("crypto");
const express = require('express');
const busboy = require('connect-busboy');
const path = require('path');
const fs = require('fs-extra');
const bodyParser = require('body-parser');
const crypto = require('crypto');
const app = express()
const redis = require("redis"),
client = redis.createClient();
const app = express();
const redis = require('redis'),
client = redis.createClient();
client.on("error", (err) => {
client.on('error', err => {
console.log(err);
})
});
app.use(busboy());
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, "../public")));
app.use(express.static(path.join(__dirname, '../public')));
app.get("/download/:id", (req, res) => {
res.sendFile(path.join(__dirname + "/../public/download.html"));
app.get('/download/:id', (req, res) => {
res.sendFile(path.join(__dirname + '/../public/download.html'));
});
app.get("/assets/download/:id", (req, res) => {
app.get('/assets/download/:id', (req, res) => {
let id = req.params.id;
if (!validateID(id)){
if (!validateID(id)) {
res.send(404);
return;
}
client.hget(id, "filename", (err, reply) => { // maybe some expiration logic too
client.hget(id, 'filename', (err, reply) => {
// maybe some expiration logic too
if (!reply) {
res.sendStatus(404);
} else {
res.setHeader("Content-Disposition", "attachment; filename=" + reply);
res.setHeader("Content-Type", "application/octet-stream");
res.download(__dirname + "/../static/" + id, reply, (err) => {
res.setHeader('Content-Disposition', 'attachment; filename=' + reply);
res.setHeader('Content-Type', 'application/octet-stream');
res.download(__dirname + '/../static/' + id, reply, err => {
if (!err) {
client.del(id);
fs.unlinkSync(__dirname + "/../static/" + id);
fs.unlinkSync(__dirname + '/../static/' + id);
}
});
}
})
});
});
app.post("/delete/:id", (req, res) => {
app.post('/delete/:id', (req, res) => {
let id = req.params.id;
if (!validateID(id)){
if (!validateID(id)) {
res.send(404);
return;
}
let delete_token = req.body.delete_token;
if (!delete_token){
if (!delete_token) {
res.sendStatus(404);
}
client.hget(id, "delete", (err, reply) => {
client.hget(id, 'delete', (err, reply) => {
if (!reply) {
res.sendStatus(404);
} else {
client.del(id);
fs.unlinkSync(__dirname + "/../static/" + id);
fs.unlinkSync(__dirname + '/../static/' + id);
res.sendStatus(200);
}
})
});
});
app.post("/upload/:id", (req, res, next) => {
if (!validateID(req.params.id)){
res.send(404);
return;
}
app.post('/upload/:id', (req, res, next) => {
if (!validateID(req.params.id)) {
res.send(404);
return;
}
let fstream;
req.pipe(req.busboy);
req.busboy.on("file", (fieldname, file, filename) => {
console.log("Uploading: " + filename);
let fstream;
req.pipe(req.busboy);
req.busboy.on('file', (fieldname, file, filename) => {
console.log('Uploading: ' + filename);
//Path where image will be uploaded
fstream = fs.createWriteStream(__dirname + "/../static/" + req.params.id);
file.pipe(fstream);
fstream.on("close", () => {
let id = req.params.id;
let uuid = crypto.randomBytes(10).toString('hex');
//Path where image will be uploaded
fstream = fs.createWriteStream(__dirname + '/../static/' + req.params.id);
file.pipe(fstream);
fstream.on('close', () => {
let id = req.params.id;
let uuid = crypto.randomBytes(10).toString('hex');
client.hmset([id, "filename", filename, "delete", uuid]);
client.hmset([id, 'filename', filename, 'delete', uuid]);
// delete the file off the server in 24 hours
// setTimeout(() => {
// fs.unlinkSync(__dirname + "/static/" + id);
// }, 86400000);
// delete the file off the server in 24 hours
// setTimeout(() => {
// fs.unlinkSync(__dirname + "/static/" + id);
// }, 86400000);
client.expire(id, 86400000);
console.log("Upload Finished of " + filename);
res.send(uuid);
});
client.expire(id, 86400000);
console.log('Upload Finished of ' + filename);
res.send(uuid);
});
});
});
app.listen(3000, () => {
console.log("Portal app listening on port 3000!")
})
console.log('Portal app listening on port 3000!');
});
let validateID = (route_id) => {
let validateID = route_id => {
return route_id.match(/^[0-9a-fA-F]{32}$/) !== null;
}
};