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

Merge pull request #46 from mozilla/ui 

Download page and share link UI
This commit is contained in:
Danny Coates 2017-06-06 15:12:34 -07:00 committed by GitHub
parent 7da6a953b6 7e6c969f79
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

52
frontend/src/download.js
View File

@ -1,39 +1,52 @@
const FileReceiver = require('./fileReceiver'); const FileReceiver = require('./fileReceiver');
let download = () => { $(document).ready(function() {
$('#send-file').click(() => {
window.location.replace(`${window.location.origin}`);
});
let download = () => {
const fileReceiver = new FileReceiver(); const fileReceiver = new FileReceiver();
let li = document.createElement('li'); let li = document.createElement('li');
let name = document.createElement('p'); let name = document.createElement('p');
li.appendChild(name);
let progress = document.createElement('p'); let progress = document.createElement('p');
li.appendChild(progress); let btn = $('#download-btn');
document.getElementById('downloaded_files').appendChild(li); // li.appendChild(name);
// li.appendChild(progress);
//document.getElementById('downloaded_files').appendChild(li);
fileReceiver.on('progress', percentComplete => { fileReceiver.on('progress', percentComplete => {
progress.innerText = `Progress: ${percentComplete}%`; progress.innerText = `Progress: ${percentComplete}%`;
if (percentComplete === 100) { if (percentComplete === 100) {
fileReceiver.removeAllListeners('progress'); 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 finished = document.createElement('p'); // let close = document.createElement('button');
finished.innerText = 'Your download has finished.'; // close.innerText = 'Ok';
li.appendChild(finished); // close.addEventListener('click', () => {
// document.getElementById('downloaded_files').removeChild(li);
let close = document.createElement('button'); // });
close.innerText = 'Ok'; // li.appendChild(close);
close.addEventListener('click', () => {
document.getElementById('downloaded_files').removeChild(li);
});
li.appendChild(close);
} }
}); });
fileReceiver.download() fileReceiver
.catch((err) => { .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.'); console.log('The file has expired, or has already been deleted.');
document.getElementById('downloaded_files').removeChild(li); // document.getElementById('downloaded_files').removeChild(li);
return; return;
}) })
.then(([decrypted, fname]) => { .then(([decrypted, fname]) => {
@ -48,6 +61,7 @@ let download = () => {
document.body.appendChild(a); document.body.appendChild(a);
a.click(); 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) { xhr.onload = function(e) {
if (xhr.status === 404) { 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; return;
} }
@ -58,8 +59,7 @@ class FileReceiver extends EventEmitter {
true, true,
['encrypt', 'decrypt'] ['encrypt', 'decrypt']
) )
]) ]).then(([fdata, key]) => {
.then(([fdata, key]) => {
let salt = this.salt; let salt = this.salt;
return Promise.all([ return Promise.all([
window.crypto.subtle.decrypt( window.crypto.subtle.decrypt(

51
frontend/src/upload.js
View File

@ -1,9 +1,38 @@
const FileSender = require('./fileSender'); const FileSender = require('./fileSender');
let onChange = event => { $(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();
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!');
});
$('.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]; const file = event.target.files[0];
let fileList = document.getElementById('uploaded-files'); let fileList = $('#uploaded-files');
let row = document.createElement('tr'); let row = document.createElement('tr');
let name = document.createElement('td'); let name = document.createElement('td');
let link = document.createElement('td'); let link = document.createElement('td');
@ -18,33 +47,41 @@ let onChange = event => {
row.appendChild(name); row.appendChild(name);
row.appendChild(link); row.appendChild(link);
row.appendChild(expiry); row.appendChild(expiry);
fileList.appendChild(row); fileList.append(row);
const fileSender = new FileSender(file); const fileSender = new FileSender(file);
fileSender.on('progress', percentComplete => { fileSender.on('progress', percentComplete => {
$('#page-one').hide();
$('#file-list').hide();
$('#upload-progress').show();
$('#upload-filename').innerHTML += file.name;
progress.innerText = `Progress: ${percentComplete}%`; progress.innerText = `Progress: ${percentComplete}%`;
}); });
fileSender.upload().then(info => { fileSender.upload().then(info => {
const url = `${window.location const url = `${window.location
.origin}/download/${info.fileId}/#${info.secretKey}`; .origin}/download/${info.fileId}/#${info.secretKey}`;
$('#link').attr('value', url);
link.innerHTML = url; link.innerHTML = url;
localStorage.setItem(info.fileId, info.deleteToken); localStorage.setItem(info.fileId, info.deleteToken);
let del = document.createElement('td'); let del = document.createElement('td');
let btn = document.createElement('button'); let btn = document.createElement('button');
btn.innerHTML = 'x'; btn.innerHTML = 'x';
btn.classList.add('delete-btn'); btn.classList.add('delete-btn');
btn.addEventListener('click', () => { btn.addEventListener('click', e => {
FileSender.delete( FileSender.delete(
info.fileId, info.fileId,
localStorage.getItem(info.fileId) localStorage.getItem(info.fileId)
).then(() => { ).then(() => {
fileList.removeChild(row); e.target.parentNode.parentNode.remove();
localStorage.removeItem(info.fileId); localStorage.removeItem(info.fileId);
}); });
}); });
del.appendChild(btn); del.appendChild(btn);
row.appendChild(del); row.appendChild(del);
$('#upload-progress').hide();
$('#share-link').show();
}); });
}; };
window.onChange = onChange; window.onChange = onChange;
});

26
public/download.html
View File

@ -1,15 +1,31 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Download your file</title> <title>Download your file</title>
<script type="text/javascript" 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" />
</head> </head>
<body> <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 id="downloaded_files">
</ul> </ul> -->
</body> </body>
</html> </html>

48
public/index.html
View File

@ -2,9 +2,10 @@
<html> <html>
<head> <head>
<title>Firefox Fileshare</title> <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" 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> </head>
<body> <body>
@ -14,7 +15,7 @@
Share your files quickly, privately and securely. Share your files quickly, privately and securely.
</div> </div>
<div class="upload-window"> <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> <div>
DRAG &amp; DROP DRAG &amp; DROP
</div> </div>
@ -24,7 +25,7 @@
</div> </div>
<div id="browse"> <div id="browse">
<form method="post" action="upload" enctype="multipart/form-data"> <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" /> <input id="file-upload" type="file" onchange="onChange(event)" name="fileUploaded" />
</form> </form>
</div> </div>
@ -37,12 +38,47 @@
<tr> <tr>
<th width=30%>File</th> <th width=30%>File</th>
<th width=45%>Copy URL</th> <th width=45%>Copy URL</th>
<th width=20%>Expires in</th> <th width=18%>Expires in</th>
<th width=5%>Delete</th> <th width=7%>Delete</th>
</tr> </tr>
<div data-role="popup" id="popupArrow" data-arrow="true">
</table> </table>
</div> </div>
<div id="upload-progress">
<div class="title" id="upload-filename">
Uploading
</div> </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> </body>
</html> </html>

127
public/main.css
View File

@ -1,32 +1,35 @@
/*** index.html ***/ /*** index.html ***/
html {
/** page-one **/
body {
background: url('resources/background.png'); background: url('resources/background.png');
font-family: 'Fira Sans'; font-family: 'Fira Sans';
font-weight: 300; font-weight: 300;
font-style: normal; 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 { .main-window {
border: 1px solid; border: 1px solid;
width: 606px; width: 606px;
height: 447px; min-height: 447px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: white; background-color: white;
border-radius: 5px; border-radius: 5px;
} }
.title { .title {
font-size: 14px; font-size: 14px;
width: 50%; width: 80%;
margin: 50px auto ; margin: 50px auto;
text-align: center;
} }
.upload-window { .upload-window {
@ -44,7 +47,7 @@ body {
#browse { #browse {
float: right; float: right;
color: blue; color: #2D7EFF;
} }
#browse-text { #browse-text {
@ -96,12 +99,6 @@ td {
width: 472px; width: 472px;
margin: 10px auto ; margin: 10px auto ;
table-layout: fixed; table-layout: fixed;
overflow-y: scroll;
}
#file-list {
overflow-y: scroll;
height: 90px;
} }
.delete-btn { .delete-btn {
@ -110,3 +107,93 @@ td {
background: none; background: none;
cursor: pointer; 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

83
server/portal_server.js
View File

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