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

Merge pull request #71 from mozilla/ui 

Drag & drop
This commit is contained in:
Daniela Arcese 2017-06-09 11:11:02 -04:00 committed by GitHub
parent 29cdc077e8 2323b17e1e
commit e077160a47
6 changed files with 148 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
frontend/src/fileSender.js
View File

@ -11,7 +11,7 @@ class FileSender extends EventEmitter {
static delete(fileId, token) {
return new Promise((resolve, reject) => {
if (!fileId || !token) {
return resolve();
return reject();
}
let xhr = new XMLHttpRequest();
xhr.open('post', '/delete/' + fileId, true);
@ -51,55 +51,55 @@ class FileSender extends EventEmitter {
};
})
])
.then(([secretKey, plaintext]) => {
return Promise.all([
window.crypto.subtle.encrypt(
{
name: 'AES-CBC',
iv: this.iv
},
secretKey,
plaintext
),
window.crypto.subtle.exportKey('jwk', secretKey)
]);
})
.then(([encrypted, keydata]) => {
return new Promise((resolve, reject) => {
let file = this.file;
let fileId = ivToStr(this.iv);
let dataView = new DataView(encrypted);
let blob = new Blob([dataView], { type: file.type });
let fd = new FormData();
fd.append('fname', file.name);
fd.append('data', blob, file.name);
.then(([secretKey, plaintext]) => {
return Promise.all([
window.crypto.subtle.encrypt(
{
name: 'AES-CBC',
iv: this.iv
},
secretKey,
plaintext
),
window.crypto.subtle.exportKey('jwk', secretKey)
]);
})
.then(([encrypted, keydata]) => {
return new Promise((resolve, reject) => {
let file = this.file;
let fileId = ivToStr(this.iv);
let dataView = new DataView(encrypted);
let blob = new Blob([dataView], { type: file.type });
let fd = new FormData();
fd.append('fname', file.name);
fd.append('data', blob, file.name);
let xhr = new XMLHttpRequest();
let xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', e => {
if (e.lengthComputable) {
let percentComplete = Math.floor(e.loaded / e.total * 100);
this.emit('progress', percentComplete);
}
});
xhr.onreadystatechange = () => {
if (xhr.readyState == XMLHttpRequest.DONE) {
// uuid field and url field
let responseObj = JSON.parse(xhr.responseText);
resolve({
url: responseObj.url,
fileId: fileId,
secretKey: keydata.k,
deleteToken: responseObj.uuid
});
}
};
xhr.open('post', '/upload/' + fileId, true);
xhr.send(fd);
xhr.upload.addEventListener('progress', e => {
if (e.lengthComputable) {
let percentComplete = Math.floor(e.loaded / e.total * 100);
this.emit('progress', percentComplete);
}
});
xhr.onreadystatechange = () => {
if (xhr.readyState == XMLHttpRequest.DONE) {
// uuid field and url field
let responseObj = JSON.parse(xhr.responseText);
resolve({
url: responseObj.url,
fileId: fileId,
secretKey: keydata.k,
deleteToken: responseObj.uuid
});
}
};
xhr.open('post', '/upload/' + fileId, true);
xhr.send(fd);
});
});
}
}

71
frontend/src/upload.js
View File

@ -2,16 +2,18 @@ const FileSender = require('./fileSender');
const $ = require('jquery');
$(document).ready(function() {
// reset copy button
let copyBtn = $('#copy-btn');
copyBtn.attr('disabled', false);
copyBtn.html('Copy');
$('#page-one').show();
$('#file-list').hide();
$('#upload-progress').hide();
$('#share-link').hide();
// copy link to clipboard
copyBtn.click(() => {
console.log('copied');
var aux = document.createElement('input');
aux.setAttribute('value', $('#link').attr('value'));
document.body.appendChild(aux);
@ -21,6 +23,8 @@ $(document).ready(function() {
copyBtn.attr('disabled', true);
copyBtn.html('Copied!');
});
// link back to home page
$('.send-new').click(() => {
$('#page-one').show();
$('#file-list').show();
@ -30,25 +34,48 @@ $(document).ready(function() {
copyBtn.html('Copy');
});
let onChange = event => {
const file = event.target.files[0];
let fileList = $('#uploaded-files');
// on file upload by browse or drag & drop
window.onUpload = event => {
event.preventDefault();
let file = '';
if (event.type == 'drop') {
file = event.dataTransfer.files[0];
} else {
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 del = document.createElement('td');
let btn = document.createElement('button');
let popupDiv = document.createElement('div');
let $popupText = $('<span>', { 'class': 'popuptext' });
let cellText = document.createTextNode(file.name);
let progress = document.createElement('p');
name.appendChild(cellText);
let progress = document.createElement('p');
// create delete button
btn.innerHTML = 'x';
btn.classList.add('delete-btn');
// create popup
popupDiv.classList.add('popup');
$popupText.html(
"<span class='del-file'>Delete</span><span class='nvm'> Nevermind</span>"
);
// add data cells to table row
row.appendChild(name);
row.appendChild(link);
row.appendChild(expiry);
fileList.append(row);
popupDiv.appendChild(btn);
$(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 => {
@ -63,25 +90,33 @@ $(document).ready(function() {
$('#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 => {
// delete file
$popupText.find('.del-file').click(e => {
FileSender.delete(
info.fileId,
localStorage.getItem(info.fileId)
).then(() => {
e.target.parentNode.parentNode.remove();
).then(() => {
//
$(e.target).parents('tr').remove();
localStorage.removeItem(info.fileId);
});
});
del.appendChild(btn);
row.appendChild(del);
// show popup
btn.addEventListener('click', toggleShow);
// hide popup
$popupText.find('.nvm').click(toggleShow);
$('#upload-progress').hide();
$('#share-link').show();
});
function toggleShow(){
$popupText.toggleClass('show');
}
};
window.onChange = onChange;
window.allowDrop = function(ev) {
ev.preventDefault();
};
});

45
public/main.css
View File

@ -28,7 +28,7 @@ input, select, textarea, button {
.title {
font-size: 14px;
width: 80%;
margin: 50px auto;
margin: 40px auto;
text-align: center;
}
@ -108,6 +108,49 @@ td {
cursor: pointer;
}
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
transition: opacity 0.5s;
opacity: 0;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.popup .show {
visibility: visible;
opacity: 1;
}
/** upload-progress **/

1
server/portal_server.js
View File

@ -108,6 +108,7 @@ app.post('/delete/:id', (req, res) => {
.then(err => {
if (!err) {
log.info('Deleted:', id);
res.sendStatus(200);
}
})
.catch(err => res.sendStatus(404));

5
views/download.handlebars
View File

@ -13,10 +13,9 @@
<div id="download">
{{#if filename}}
<div class="title">
Your friend is sending you a file:
Your friend is sending you a file: <br>
{{{filename}}} ({{{filesize}}})
</div>
<span> {{{filename}}} ({{{filesize}}})
<div class="share-window">
<button id="download-btn" onclick="download()">Download File</button>

5
views/index.handlebars
View File

@ -14,7 +14,7 @@
<div class="title">
Share your files quickly, privately and securely.
</div>
<div class="upload-window">
<div class="upload-window" ondrop="onUpload(event)" ondragover="allowDrop(event)">
<div id="upload-img"><img src="/resources/upload.svg"/></div>
<div>
DRAG &amp; DROP
@ -26,7 +26,7 @@
<div id="browse">
<form method="post" action="upload" enctype="multipart/form-data">
<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="onUpload(event)" name="fileUploaded" />
</form>
</div>
</div>
@ -41,7 +41,6 @@
<th width=18%>Expires in</th>
<th width=7%>Delete</th>
</tr>
<div data-role="popup" id="popupArrow" data-arrow="true">
</table>
</div>