web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add a queue for multiple uploads in the file app

Browse Source
This commit is contained in:
yflory
2017-05-19 18:41:34 +02:00
parent ef155d8ccf
commit 1ab6eb3c5d
5 changed files with 150 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
www/file/inner.html
View File

@@ -42,6 +42,8 @@
margin: auto;
}
#upload-form label{
text-align: center;
line-height: 50vh;
position: relative;
}
@@ -82,14 +84,56 @@
display: block;
}
#status {
display: none;
width: 80vw;
margin-top: 50px;
margin-left: 10vw;
border: 1px solid black;
border-collapse: collapse;
}
#status tr:nth-child(1) {
background-color: #ccc;
border: 1px solid #999;
}
#status tr:nth-child(1) td { text-align: center; }
#status td {
border-left: 1px solid #BBB;
border-right: 1px solid #BBB;
padding: 0 10px;
}
#status .upProgress {
width: 200px;
position: relative;
text-align: center;
}
#status .progressContainer {
position: absolute;
width: 0px;
left: 5px;
top: 1px; bottom: 1px;
background-color: rgba(0,0,255,0.3);
}
#status .upCancel { text-align: center; }
#status .fa.cancel {
color: rgb(255, 0, 115);
}
</style>
</head>
<body>
<div id="toolbar" class="toolbar-container"></div>
<div id="upload-form" style="display: none;">
<input type="file" name="file" id="file" class="inputfile" />
<label for="file" class="block">Choose a file<span class="block" id="progress">&nbsp;</span></label>
<label for="file" class="block" data-localization="upload_choose">Choose a file<span class="block" id="progress">&nbsp;</span></label>
</div>
<table id="status">
<tr>
<td data-localization="upload_name">File name</td>
<td data-localization="upload_size">Size</td>
<td data-localization="upload_progress">Progress</td>
<td data-localization="cancel">Cancel</td>
</tr>
</table>
<div id="feedback" class="block hidden">
</div>
</body>

91
www/file/main.js
View File

@@ -21,8 +21,9 @@ define([
var ifrw = $('#pad-iframe')[0].contentWindow;
var $iframe = $('#pad-iframe').contents();
var $form = $iframe.find('#upload-form');
var $progress = $form.find('#progress');
//var $progress = $form.find('#progress');
var $label = $form.find('label');
var $table = $iframe.find('#status');
Cryptpad.addLoadingScreen();
@@ -31,8 +32,23 @@ define([
var myFile;
var myDataType;
var upload = function (blob, metadata) {
var queue = {
queue: [],
inProgress: false
};
var uid = function () {
return 'file-' + String(Math.random()).substring(2);
};
var upload = function (blob, metadata, id) {
console.log(metadata);
if (queue.inProgress) { return; }
queue.inProgress = true;
var $cancelCell = $table.find('tr[id="'+id+'"]').find('.upCancel');
$cancelCell.html('-');
var u8 = new Uint8Array(blob);
var key = Nacl.randomBytes(32);
@@ -56,13 +72,19 @@ define([
if (err) { throw new Error(err); }
if (box) {
actual += box.length;
var progress = (actual / estimate * 100) + '%';
console.log(progress);
var progressValue = (actual / estimate * 100);
var progress = progressValue + '%';
return void sendChunk(box, function (e) {
if (e) { return console.error(e); }
$progress.css({
/*$progress.css({
width: progress,
});*/
var $pv = $table.find('tr[id="'+id+'"]').find('.progressValue');
$pv.text(Math.round(progressValue*100)/100 + '%');
var $pb = $table.find('tr[id="'+id+'"]').find('.progressContainer');
$pb.css({
width: (progressValue/100)*188+'px'
});
next(again);
@@ -82,7 +104,7 @@ define([
var b64Key = Nacl.util.encodeBase64(key);
Cryptpad.replaceHash(Cryptpad.getFileHashFromKeys(id, b64Key));
$form.hide();
//$form.hide();
APP.toolbar.addElement(['fileshare'], {});
@@ -94,11 +116,15 @@ define([
APP.toolbar.title.show();
console.log(title);
Cryptpad.alert(Messages._getKey('upload_success', [title]));
queue.inProgress = false;
queue.next();
});
};
Cryptpad.uploadStatus(estimate, function (e, pending) {
if (e) {
queue.inProgress = false;
queue.next();
if (e === 'TOO_LARGE') {
return void Cryptpad.alert(Messages.upload_tooLarge);
}
@@ -110,7 +136,7 @@ define([
}
if (pending) {
// TODO queue uploads... ?
// TODO keep this message in case of pending files in another window?
return void Cryptpad.confirm(Messages.upload_uploadPending, function (yes) {
if (!yes) { return; }
Cryptpad.uploadCancel(function (e, res) {
@@ -126,6 +152,48 @@ define([
});
};
var prettySize = function (bytes) {
var kB = Cryptpad.bytesToKilobytes(bytes);
if (kB < 1024) { return kB + Messages.KB; }
var mB = Cryptpad.bytesToMegabytes(bytes);
return mB + Messages.MB;
};
queue.next = function () {
if (queue.queue.length === 0) { return; }
if (queue.inProgress) { return; }
var file = queue.queue.shift();
upload(file.blob, file.metadata, file.id);
};
queue.push = function (obj) {
var id = uid();
obj.id = id;
queue.queue.push(obj);
$table.show();
var estimate = FileCrypto.computeEncryptedSize(obj.blob.byteLength, obj.metadata);
var $progressBar = $('<div>', {'class':'progressContainer'});
var $progressValue = $('<span>', {'class':'progressValue'}).text(Messages.upload_pending);
var $tr = $('<tr>', {id: id}).appendTo($table);
var $cancel = $('<span>', {'class': 'cancel fa fa-times'}).click(function () {
queue.queue = queue.queue.filter(function (el) { return el.id !== id });
$cancel.remove();
$tr.find('.upCancel').text('-');
$tr.find('.progressValue').text(Messages.upload_cancelled);
});
var $tr = $('<tr>', {id: id}).appendTo($table);
$('<td>').text(obj.metadata.name).appendTo($tr);
$('<td>').text(prettySize(estimate)).appendTo($tr);
$('<td>', {'class': 'upProgress'}).append($progressBar).append($progressValue).appendTo($tr);
$('<td>', {'class': 'upCancel'}).append($cancel).appendTo($tr);
queue.next();
};
var uploadMode = false;
var andThen = function () {
@@ -225,9 +293,12 @@ define([
console.log(file);
var reader = new FileReader();
reader.onloadend = function () {
upload(this.result, {
name: file.name,
type: file.type,
queue.push({
blob: this.result,
metadata: {
name: file.name,
type: file.type,
}
});
};
reader.readAsArrayBuffer(file);