Merge pull request #134 from mozilla/ui

Load previous uploads
This commit is contained in:
Danny Coates 2017-06-23 17:13:24 -07:00 committed by GitHub
commit 7ee4af002c
9 changed files with 127 additions and 105 deletions

View File

@ -4,7 +4,6 @@ const $ = require('jquery');
const Raven = window.Raven; const Raven = window.Raven;
$(document).ready(function() { $(document).ready(function() {
$('#download-progress').hide(); $('#download-progress').hide();
$('#send-file').click(() => { $('#send-file').click(() => {

View File

@ -64,26 +64,26 @@ class FileReceiver extends EventEmitter {
['encrypt', 'decrypt'] ['encrypt', 'decrypt']
) )
]) ])
.then(([fdata, key]) => { .then(([fdata, key]) => {
const salt = this.salt; const salt = this.salt;
return Promise.all([ return Promise.all([
window.crypto.subtle.decrypt( window.crypto.subtle.decrypt(
{ {
name: 'AES-CBC', name: 'AES-CBC',
iv: salt iv: salt
}, },
key, key,
fdata.data fdata.data
), ),
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
resolve(fdata.fname); resolve(fdata.fname);
}) })
]); ]);
}) })
.catch(err => { .catch(err => {
Raven.captureException(err); Raven.captureException(err);
return Promise.reject(err); return Promise.reject(err);
}); });
} }
} }

View File

@ -66,10 +66,6 @@ class FileSender extends EventEmitter {
window.crypto.subtle.exportKey('jwk', secretKey) window.crypto.subtle.exportKey('jwk', secretKey)
]); ]);
}) })
.catch(err => {
Raven.captureException(err)
return Promise.reject(err);
})
.then(([encrypted, keydata]) => { .then(([encrypted, keydata]) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const file = this.file; const file = this.file;
@ -107,7 +103,7 @@ class FileSender extends EventEmitter {
}); });
}) })
.catch(err => { .catch(err => {
Raven.captureException(err) Raven.captureException(err);
return Promise.reject(err); return Promise.reject(err);
}); });
} }

View File

@ -2,8 +2,6 @@ const FileSender = require('./fileSender');
const { notify } = require('./utils'); const { notify } = require('./utils');
const $ = require('jquery'); const $ = require('jquery');
const Raven = window.Raven;
$(document).ready(function() { $(document).ready(function() {
// reset copy button // reset copy button
const $copyBtn = $('#copy-btn'); const $copyBtn = $('#copy-btn');
@ -11,10 +9,15 @@ $(document).ready(function() {
$copyBtn.html('Copy'); $copyBtn.html('Copy');
$('#page-one').show(); $('#page-one').show();
$('#file-list').hide(); $('#file-list').show();
$('#upload-progress').hide(); $('#upload-progress').hide();
$('#share-link').hide(); $('#share-link').hide();
for (let i = 0; i < localStorage.length; i++) {
const id = localStorage.key(i);
populateFileList(localStorage.getItem(id));
}
// copy link to clipboard // copy link to clipboard
$copyBtn.click(() => { $copyBtn.click(() => {
const aux = document.createElement('input'); const aux = document.createElement('input');
@ -52,7 +55,52 @@ $(document).ready(function() {
file = event.target.files[0]; file = event.target.files[0];
} }
const $fileList = $('#uploaded-files'); const fileSender = new FileSender(file);
fileSender.on('progress', percentComplete => {
$('#page-one').hide();
$('#file-list').hide();
$('#upload-progress').show();
$('#upload-filename').innerHTML += file.name;
// update progress bar
document
.querySelector('#progress-bar')
.style.setProperty('--progress', percentComplete + '%');
$('#progress-text').html(`${percentComplete}%`);
});
fileSender.upload().then(info => {
const url = info.url.trim() + `#${info.secretKey}`.trim();
$('#link').attr('value', url);
const fileData = {
name: file.name,
fileId: info.fileId,
url: info.url,
secretKey: info.secretKey,
deleteToken: info.deleteToken
};
localStorage.setItem(info.fileId, JSON.stringify(fileData));
$('#page-one').hide();
$('#file-list').hide();
$('#upload-progress').hide();
$('#share-link').show();
populateFileList(JSON.stringify(fileData));
notify('Your upload has finished.');
});
};
window.allowDrop = function(ev) {
ev.preventDefault();
};
//update file table with current files in localStorage
function populateFileList(file) {
try {
file = JSON.parse(file);
} catch (e) {
return;
}
const row = document.createElement('tr'); const row = document.createElement('tr');
const name = document.createElement('td'); const name = document.createElement('td');
const link = document.createElement('td'); const link = document.createElement('td');
@ -69,6 +117,7 @@ $(document).ready(function() {
// create delete button // create delete button
btn.innerHTML = 'x'; btn.innerHTML = 'x';
btn.classList.add('delete-btn'); btn.classList.add('delete-btn');
link.innerHTML = file.url.trim() + `#${file.secretKey}`.trim();
// create popup // create popup
popupDiv.classList.add('popup'); popupDiv.classList.add('popup');
@ -76,6 +125,14 @@ $(document).ready(function() {
'<span class="del-file">Delete</span><span class="nvm" > Nevermind</span>' '<span class="del-file">Delete</span><span class="nvm" > Nevermind</span>'
); );
// delete file
$popupText.find('.del-file').click(e => {
FileSender.delete(file.fileId, file.deleteToken).then(() => {
$(e.target).parents('tr').remove();
localStorage.removeItem(file.fileId);
});
});
// add data cells to table row // add data cells to table row
row.appendChild(name); row.appendChild(name);
row.appendChild(link); row.appendChild(link);
@ -85,64 +142,21 @@ $(document).ready(function() {
del.appendChild(popupDiv); del.appendChild(popupDiv);
row.appendChild(del); row.appendChild(del);
const fileSender = new FileSender(file); // show popup
fileSender.on('progress', percentComplete => { del.addEventListener('click', toggleShow);
$('#page-one').hide(); // hide popup
$('#file-list').hide(); $popupText.find('.nvm').click(function(e) {
$('#upload-progress').show(); e.stopPropagation();
$('#upload-filename').innerHTML += file.name; toggleShow();
// update progress bar
document
.querySelector('#progress-bar')
.style.setProperty('--progress', percentComplete + '%');
$('#progress-text').html(`${percentComplete}%`);
if (percentComplete === 100) {
notify('Your upload has finished.');
}
}); });
fileSender.upload().then(info => { $popupText.click(function(e) {
const url = info.url.trim() + `#${info.secretKey}`.trim(); e.stopPropagation();
$('#link').attr('value', url);
link.innerHTML = url;
localStorage.setItem(info.fileId, info.deleteToken);
// delete file
$popupText.find('.del-file').click(e => {
FileSender.delete(
info.fileId,
localStorage.getItem(info.fileId)
).then(() => {
$(e.target).parents('tr').remove();
localStorage.removeItem(info.fileId);
})
.catch(err => {
Raven.captureException(err);
return Promise.reject(err);
});
});
// show popup
del.addEventListener('click', toggleShow);
// hide popup
$popupText.find('.nvm').click(toggleShow);
$fileList.append(row); //add row to table
$('#page-one').hide();
$('#file-list').hide();
$('#upload-progress').hide();
$('#share-link').show();
})
.catch(err => {
Raven.captureException(err);
return Promise.reject(err);
}); });
$('tbody').append(row); //add row to table
function toggleShow() { function toggleShow() {
$popupText.toggleClass('show'); $popupText.toggleClass('show');
} }
}; }
window.allowDrop = function(ev) {
ev.preventDefault();
};
}); });

6
package-lock.json generated
View File

@ -198,9 +198,9 @@
"dev": true "dev": true
}, },
"aws-sdk": { "aws-sdk": {
"version": "2.76.0", "version": "2.77.0",
"resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.76.0.tgz", "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.77.0.tgz",
"integrity": "sha1-LDe/BON6tKJrX/fHWD1ZYDTHYwk=" "integrity": "sha1-gJCQu4dNj0//ysUxZilYdjjnhlw="
}, },
"babel-code-frame": { "babel-code-frame": {
"version": "6.22.0", "version": "6.22.0",

View File

@ -24,7 +24,8 @@ const conf = convict({
}, },
sentry_id: { sentry_id: {
format: String, format: String,
default: 'https://cdf9a4f43a584f759586af8ceb2194f2@sentry.prod.mozaws.net/238', default:
'https://cdf9a4f43a584f759586af8ceb2194f2@sentry.prod.mozaws.net/238',
env: 'P2P_SENTRY_CLIENT' env: 'P2P_SENTRY_CLIENT'
}, },
sentry_dsn: { sentry_dsn: {

View File

@ -45,9 +45,12 @@ app.get('/', (req, res) => {
app.get('/exists/:id', (req, res) => { app.get('/exists/:id', (req, res) => {
const id = req.params.id; const id = req.params.id;
storage.exists(id).then(() => { storage
res.sendStatus(200); .exists(id)
}).catch(err => res.sendStatus(404)); .then(() => {
res.sendStatus(200);
})
.catch(err => res.sendStatus(404));
}); });
app.get('/download/:id', (req, res) => { app.get('/download/:id', (req, res) => {

View File

@ -44,16 +44,18 @@ const storage = proxyquire('../server/storage', {
describe('Testing Exists from local filesystem', function() { describe('Testing Exists from local filesystem', function() {
it('Exists returns true when file exists', function() { it('Exists returns true when file exists', function() {
exists.callsArgWith(1, null, 1); exists.callsArgWith(1, null, 1);
return storage.exists('test') return storage
.then(() => assert(1)) .exists('test')
.catch(err => assert.fail()) .then(() => assert(1))
.catch(err => assert.fail());
}); });
it('Exists returns false when file does not exist', function() { it('Exists returns false when file does not exist', function() {
exists.callsArgWith(1, null, 0); exists.callsArgWith(1, null, 0);
return storage.exists('test') return storage
.then(() => assert.fail()) .exists('test')
.catch(err => assert(1)) .then(() => assert.fail())
.catch(err => assert(1));
}); });
}); });

View File

@ -38,12 +38,19 @@
<div id="file-list"> <div id="file-list">
<table id="uploaded-files"> <table id="uploaded-files">
<tr> <thead>
<th width="30%">File</th> <tr>
<th width="45%">Copy URL</th> <!-- htmllint attr-bans="false" -->
<th width="18%">Expires in</th> <th width="30%">File</th>
<th width="7%">Delete</th> <th width="45%">Copy URL</th>
</tr> <th width="18%">Expires in</th>
<th width="7%">Delete</th>
<!-- htmllint tag-bans="$previous" -->
</tr>
</thead>
<tbody>
</tbody>
</table> </table>
</div> </div>