Merge pull request #514 from mozilla/refactor-download
use async and removed jquery from download.js
This commit is contained in:
Danny Coates
GitHub
commit
f1fb877c7f
|
|
@ -5,26 +5,29 @@ import Storage from './storage';
|
|||
import * as links from './links';
|
||||
import * as metrics from './metrics';
|
||||
import * as progress from './progress';
|
||||
import $ from 'jquery/dist/jquery.slim';
|
||||
|
||||
const storage = new Storage();
|
||||
function onUnload(size) {
|
||||
metrics.cancelledDownload({ size });
|
||||
}
|
||||
|
||||
function download() {
|
||||
const $downloadBtn = $('#download-btn');
|
||||
const $title = $('.title');
|
||||
const $file = $('#dl-file');
|
||||
const size = Number($file.attr('data-size'));
|
||||
const ttl = Number($file.attr('data-ttl'));
|
||||
async function download() {
|
||||
const downloadBtn = document.getElementById('download-btn');
|
||||
const downloadPanel = document.getElementById('download-page-one');
|
||||
const progressPanel = document.getElementById('download-progress');
|
||||
const file = document.getElementById('dl-file');
|
||||
const size = Number(file.getAttribute('data-size'));
|
||||
const ttl = Number(file.getAttribute('data-ttl'));
|
||||
const unloadHandler = onUnload.bind(null, size);
|
||||
const startTime = Date.now();
|
||||
const fileReceiver = new FileReceiver();
|
||||
const fileReceiver = new FileReceiver(
|
||||
'/assets' + location.pathname.slice(0, -1),
|
||||
location.hash.slice(1)
|
||||
);
|
||||
|
||||
$downloadBtn.attr('disabled', 'disabled');
|
||||
$('#download-page-one').attr('hidden', true);
|
||||
$('#download-progress').removeAttr('hidden');
|
||||
downloadBtn.disabled = true;
|
||||
downloadPanel.hidden = true;
|
||||
progressPanel.hidden = false;
|
||||
metrics.startedDownload({ size, ttl });
|
||||
links.setOpenInNewTab(true);
|
||||
window.addEventListener('unload', unloadHandler);
|
||||
|
|
@ -41,76 +44,72 @@ function download() {
|
|||
document.l10n.formatValue('decryptingFile').then(progress.setText);
|
||||
});
|
||||
|
||||
fileReceiver
|
||||
.download()
|
||||
.catch(err => {
|
||||
metrics.stoppedDownload({ size, err });
|
||||
try {
|
||||
const file = await fileReceiver.download();
|
||||
const endTime = Date.now();
|
||||
const time = endTime - startTime;
|
||||
const downloadTime = endTime - downloadEnd;
|
||||
const speed = size / (downloadTime / 1000);
|
||||
|
||||
if (err.message === 'notfound') {
|
||||
location.reload();
|
||||
} else {
|
||||
document.l10n.formatValue('errorPageHeader').then(translated => {
|
||||
$title.text(translated);
|
||||
});
|
||||
$downloadBtn.attr('hidden', true);
|
||||
$('#expired-img').removeAttr('hidden');
|
||||
}
|
||||
throw err;
|
||||
})
|
||||
.then(([decrypted, file]) => {
|
||||
const fname = file.name;
|
||||
const endTime = Date.now();
|
||||
const time = endTime - startTime;
|
||||
const downloadTime = endTime - downloadEnd;
|
||||
const speed = size / (downloadTime / 1000);
|
||||
storage.totalDownloads += 1;
|
||||
metrics.completedDownload({ size, time, speed });
|
||||
progress.setText(' ');
|
||||
document.l10n
|
||||
.formatValues('downloadNotification', 'downloadFinish')
|
||||
.then(translated => {
|
||||
notify(translated[0]);
|
||||
$title.text(translated[1]);
|
||||
});
|
||||
links.setOpenInNewTab(false);
|
||||
storage.totalDownloads += 1;
|
||||
metrics.completedDownload({ size, time, speed });
|
||||
progress.setText(' ');
|
||||
document.l10n
|
||||
.formatValues('downloadNotification', 'downloadFinish')
|
||||
.then(translated => {
|
||||
notify(translated[0]);
|
||||
document.getElementById('dl-title').textContent = translated[1];
|
||||
document.querySelector('#download-progress .description').textContent =
|
||||
' ';
|
||||
});
|
||||
const dataView = new DataView(file.plaintext);
|
||||
const blob = new Blob([dataView], { type: file.type });
|
||||
const downloadUrl = URL.createObjectURL(blob);
|
||||
|
||||
const dataView = new DataView(decrypted);
|
||||
const blob = new Blob([dataView], { type: file.type });
|
||||
const downloadUrl = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = downloadUrl;
|
||||
if (window.navigator.msSaveBlob) {
|
||||
window.navigator.msSaveBlob(blob, file.name);
|
||||
return;
|
||||
}
|
||||
a.download = file.name;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
URL.revokeObjectURL(downloadUrl);
|
||||
} catch (err) {
|
||||
metrics.stoppedDownload({ size, err });
|
||||
|
||||
const a = document.createElement('a');
|
||||
a.href = downloadUrl;
|
||||
if (window.navigator.msSaveBlob) {
|
||||
// if we are in microsoft edge or IE
|
||||
window.navigator.msSaveBlob(blob, fname);
|
||||
return;
|
||||
}
|
||||
a.download = fname;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
URL.revokeObjectURL(downloadUrl);
|
||||
})
|
||||
.catch(err => {
|
||||
Raven.captureException(err);
|
||||
return Promise.reject(err);
|
||||
})
|
||||
.then(() => links.setOpenInNewTab(false));
|
||||
if (err.message === 'notfound') {
|
||||
location.reload();
|
||||
} else {
|
||||
progressPanel.hidden = true;
|
||||
downloadPanel.hidden = true;
|
||||
document.getElementById('upload-error').hidden = false;
|
||||
}
|
||||
Raven.captureException(err);
|
||||
}
|
||||
}
|
||||
|
||||
$(() => {
|
||||
const $file = $('#dl-file');
|
||||
const filename = $file.attr('data-filename');
|
||||
const b = Number($file.attr('data-size'));
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const file = document.getElementById('dl-file');
|
||||
const filename = file.getAttribute('data-filename');
|
||||
const b = Number(file.getAttribute('data-size'));
|
||||
const size = bytes(b);
|
||||
document.l10n
|
||||
.formatValue('downloadFileSize', { size })
|
||||
.then(str => $('#dl-filesize').text(str));
|
||||
document.l10n.formatValue('downloadFileSize', { size }).then(str => {
|
||||
document.getElementById('dl-filesize').textContent = str;
|
||||
});
|
||||
document.l10n
|
||||
.formatValue('downloadingPageProgress', { filename, size })
|
||||
.then(str => $('#dl-title').text(str));
|
||||
.then(str => {
|
||||
document.getElementById('dl-title').textContent = str;
|
||||
});
|
||||
|
||||
gcmCompliant()
|
||||
.then(() => {
|
||||
$('#download-btn').on('click', download);
|
||||
document
|
||||
.getElementById('download-btn')
|
||||
.addEventListener('click', download);
|
||||
})
|
||||
.catch(err => {
|
||||
metrics.unsupported({ err }).then(() => {
|
||||
|
|
|
|||
|
|
@ -2,87 +2,80 @@ import EventEmitter from 'events';
|
|||
import { hexToArray } from './utils';
|
||||
|
||||
export default class FileReceiver extends EventEmitter {
|
||||
constructor() {
|
||||
constructor(url, k) {
|
||||
super();
|
||||
this.key = window.crypto.subtle.importKey(
|
||||
'jwk',
|
||||
{
|
||||
k,
|
||||
kty: 'oct',
|
||||
alg: 'A128GCM',
|
||||
ext: true
|
||||
},
|
||||
{
|
||||
name: 'AES-GCM'
|
||||
},
|
||||
false,
|
||||
['decrypt']
|
||||
);
|
||||
this.url = url;
|
||||
}
|
||||
|
||||
download() {
|
||||
return window.crypto.subtle
|
||||
.importKey(
|
||||
'jwk',
|
||||
{
|
||||
kty: 'oct',
|
||||
k: location.hash.slice(1),
|
||||
alg: 'A128GCM',
|
||||
ext: true
|
||||
},
|
||||
{
|
||||
name: 'AES-GCM'
|
||||
},
|
||||
true,
|
||||
['encrypt', 'decrypt']
|
||||
)
|
||||
.then(key => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const xhr = new XMLHttpRequest();
|
||||
downloadFile() {
|
||||
return new Promise((resolve, reject) => {
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
||||
xhr.onprogress = event => {
|
||||
if (event.lengthComputable && event.target.status !== 404) {
|
||||
this.emit('progress', [event.loaded, event.total]);
|
||||
}
|
||||
};
|
||||
xhr.onprogress = event => {
|
||||
if (event.lengthComputable && event.target.status !== 404) {
|
||||
this.emit('progress', [event.loaded, event.total]);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onload = function(event) {
|
||||
if (xhr.status === 404) {
|
||||
reject(new Error('notfound'));
|
||||
return;
|
||||
}
|
||||
xhr.onload = function(event) {
|
||||
if (xhr.status === 404) {
|
||||
reject(new Error('notfound'));
|
||||
return;
|
||||
}
|
||||
|
||||
const blob = new Blob([this.response]);
|
||||
const type = xhr.getResponseHeader('Content-Type');
|
||||
const meta = JSON.parse(xhr.getResponseHeader('X-File-Metadata'));
|
||||
const fileReader = new FileReader();
|
||||
fileReader.onload = function() {
|
||||
resolve([
|
||||
{
|
||||
data: this.result,
|
||||
filename: meta.filename,
|
||||
type,
|
||||
iv: meta.id
|
||||
},
|
||||
key
|
||||
]);
|
||||
};
|
||||
const blob = new Blob([this.response]);
|
||||
const type = xhr.getResponseHeader('Content-Type');
|
||||
const meta = JSON.parse(xhr.getResponseHeader('X-File-Metadata'));
|
||||
const fileReader = new FileReader();
|
||||
fileReader.onload = function() {
|
||||
resolve({
|
||||
data: this.result,
|
||||
name: meta.filename,
|
||||
type,
|
||||
iv: meta.id
|
||||
});
|
||||
};
|
||||
|
||||
fileReader.readAsArrayBuffer(blob);
|
||||
};
|
||||
fileReader.readAsArrayBuffer(blob);
|
||||
};
|
||||
|
||||
xhr.open('get', '/assets' + location.pathname.slice(0, -1), true);
|
||||
xhr.responseType = 'blob';
|
||||
xhr.send();
|
||||
});
|
||||
})
|
||||
.then(([fdata, key]) => {
|
||||
this.emit('decrypting');
|
||||
return Promise.all([
|
||||
window.crypto.subtle
|
||||
.decrypt(
|
||||
{
|
||||
name: 'AES-GCM',
|
||||
iv: hexToArray(fdata.iv),
|
||||
tagLength: 128
|
||||
},
|
||||
key,
|
||||
fdata.data
|
||||
)
|
||||
.then(decrypted => {
|
||||
return Promise.resolve(decrypted);
|
||||
}),
|
||||
{
|
||||
name: decodeURIComponent(fdata.filename),
|
||||
type: fdata.type
|
||||
}
|
||||
]);
|
||||
});
|
||||
xhr.open('get', this.url);
|
||||
xhr.responseType = 'blob';
|
||||
xhr.send();
|
||||
});
|
||||
}
|
||||
|
||||
async download() {
|
||||
const key = await this.key;
|
||||
const file = await this.downloadFile();
|
||||
this.emit('decrypting');
|
||||
const plaintext = await window.crypto.subtle.decrypt(
|
||||
{
|
||||
name: 'AES-GCM',
|
||||
iv: hexToArray(file.iv),
|
||||
tagLength: 128
|
||||
},
|
||||
key,
|
||||
file.data
|
||||
);
|
||||
return {
|
||||
plaintext,
|
||||
name: decodeURIComponent(file.name),
|
||||
type: file.type
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,5 +35,10 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="upload-error" hidden="true">
|
||||
<div class="title" data-l10n-id="errorPageHeader"></div>
|
||||
<img id="upload-error-img" data-l10n-id="errorAltText" src="/resources/illustration_error.svg"/>
|
||||
</div>
|
||||
|
||||
<a class="send-new" data-state="completed" data-l10n-id="sendYourFilesLink" href="/"></a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue