Danny Coates
GitHub
commit
0677603d74
|
|
@ -1,39 +1,52 @@
|
|||
const FileReceiver = require('./fileReceiver');
|
||||
|
||||
let download = () => {
|
||||
$(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 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 => {
|
||||
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 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);
|
||||
// let close = document.createElement('button');
|
||||
// close.innerText = 'Ok';
|
||||
// close.addEventListener('click', () => {
|
||||
// document.getElementById('downloaded_files').removeChild(li);
|
||||
// });
|
||||
// li.appendChild(close);
|
||||
}
|
||||
});
|
||||
|
||||
fileReceiver.download()
|
||||
.catch((err) => {
|
||||
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);
|
||||
// document.getElementById('downloaded_files').removeChild(li);
|
||||
return;
|
||||
})
|
||||
.then(([decrypted, fname]) => {
|
||||
|
|
@ -48,6 +61,7 @@ let download = () => {
|
|||
document.body.appendChild(a);
|
||||
a.click();
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
window.download = download;
|
||||
window.download = download;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -1,9 +1,38 @@
|
|||
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];
|
||||
|
||||
let fileList = document.getElementById('uploaded-files');
|
||||
let fileList = $('#uploaded-files');
|
||||
let row = document.createElement('tr');
|
||||
let name = document.createElement('td');
|
||||
let link = document.createElement('td');
|
||||
|
|
@ -18,33 +47,41 @@ let onChange = event => {
|
|||
row.appendChild(name);
|
||||
row.appendChild(link);
|
||||
row.appendChild(expiry);
|
||||
fileList.appendChild(row);
|
||||
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}%`;
|
||||
});
|
||||
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', () => {
|
||||
btn.addEventListener('click', e => {
|
||||
FileSender.delete(
|
||||
info.fileId,
|
||||
localStorage.getItem(info.fileId)
|
||||
).then(() => {
|
||||
fileList.removeChild(row);
|
||||
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;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 & 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
127
public/main.css
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
|
|
@ -1,98 +1,95 @@
|
|||
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"),
|
||||
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.setHeader('Content-Disposition', 'attachment; filename=' + reply);
|
||||
res.setHeader('Content-Type', 'application/octet-stream');
|
||||
|
||||
res.download(__dirname + "/../static/" + id, reply, (err) => {
|
||||
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)){
|
||||
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);
|
||||
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);
|
||||
fstream = fs.createWriteStream(__dirname + '/../static/' + req.params.id);
|
||||
file.pipe(fstream);
|
||||
fstream.on("close", () => {
|
||||
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(() => {
|
||||
|
|
@ -100,16 +97,16 @@ app.post("/upload/:id", (req, res, next) => {
|
|||
// }, 86400000);
|
||||
|
||||
client.expire(id, 86400000);
|
||||
console.log("Upload Finished of " + filename);
|
||||
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;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue