Enable drag & upload in code2 and prepare filepicker
yflory
7 years ago
parent
885282ddea
commit
89b7b644f3
@ -0,0 +1,295 @@
|
||||
define([
|
||||
'jquery',
|
||||
'/file/file-crypto.js',
|
||||
'/bower_components/tweetnacl/nacl-fast.min.js',
|
||||
], function ($, FileCrypto) {
|
||||
var Nacl = window.nacl;
|
||||
var module = {};
|
||||
|
||||
var blobToArrayBuffer = function (blob, cb) {
|
||||
var reader = new FileReader();
|
||||
reader.onloadend = function () {
|
||||
cb(void 0, this.result);
|
||||
};
|
||||
reader.readAsArrayBuffer(blob);
|
||||
};
|
||||
|
||||
var arrayBufferToString = function (AB) {
|
||||
try {
|
||||
return Nacl.util.encodeBase64(new Uint8Array(AB));
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
module.create = function (common, config) {
|
||||
var File = {};
|
||||
var Cryptpad = common.getCryptpadCommon();
|
||||
|
||||
var Messages = Cryptpad.Messages;
|
||||
|
||||
var queue = File.queue = {
|
||||
queue: [],
|
||||
inProgress: false
|
||||
};
|
||||
|
||||
var uid = function () {
|
||||
return 'file-' + String(Math.random()).substring(2);
|
||||
};
|
||||
|
||||
var $table = File.$table = $('<table>', { id: 'uploadStatus' });
|
||||
var $thead = $('<tr>').appendTo($table);
|
||||
$('<td>').text(Messages.upload_name).appendTo($thead);
|
||||
$('<td>').text(Messages.upload_size).appendTo($thead);
|
||||
$('<td>').text(Messages.upload_progress).appendTo($thead);
|
||||
$('<td>').text(Messages.cancel).appendTo($thead);
|
||||
|
||||
var createTableContainer = function ($body) {
|
||||
File.$container = $('<div>', { id: 'uploadStatusContainer' }).append($table).appendTo($body);
|
||||
return File.$container;
|
||||
};
|
||||
|
||||
var getData = function (file, href) {
|
||||
var data = {};
|
||||
|
||||
data.name = file.metadata.name;
|
||||
data.url = href;
|
||||
if (file.metadata.type.slice(0,6) === 'image/') {
|
||||
data.mediatag = true;
|
||||
}
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
var upload = function (file) {
|
||||
var blob = file.blob; // This is not a blob but an array buffer
|
||||
var u8 = new Uint8Array(blob);
|
||||
var metadata = file.metadata;
|
||||
var id = file.id;
|
||||
var dropEvent = file.dropEvent;
|
||||
delete file.dropEvent;
|
||||
if (queue.inProgress) { return; }
|
||||
queue.inProgress = true;
|
||||
|
||||
var $row = $table.find('tr[id="'+id+'"]');
|
||||
|
||||
$row.find('.upCancel').html('-');
|
||||
var $pv = $row.find('.progressValue');
|
||||
var $pb = $row.find('.progressContainer');
|
||||
var $pc = $row.find('.upProgress');
|
||||
var $link = $row.find('.upLink');
|
||||
|
||||
var sframeChan = common.getSframeChannel();
|
||||
|
||||
var updateProgress = function (progressValue) {
|
||||
$pv.text(Math.round(progressValue*100)/100 + '%');
|
||||
$pb.css({
|
||||
width: (progressValue/100)*$pc.width()+'px'
|
||||
});
|
||||
};
|
||||
|
||||
var onComplete = function (href) {
|
||||
$link.attr('href', href)
|
||||
.click(function (e) {
|
||||
e.preventDefault();
|
||||
window.open($link.attr('href'), '_blank');
|
||||
});
|
||||
var title = metadata.name;
|
||||
Cryptpad.log(Messages._getKey('upload_success', [title]));
|
||||
common.prepareFeedback('upload')();
|
||||
|
||||
if (config.onUploaded) {
|
||||
var data = getData(file, href);
|
||||
config.onUploaded(dropEvent, data);
|
||||
}
|
||||
|
||||
queue.inProgress = false;
|
||||
queue.next();
|
||||
};
|
||||
|
||||
var onError = function (e) {
|
||||
queue.inProgress = false;
|
||||
queue.next();
|
||||
if (e === 'TOO_LARGE') {
|
||||
// TODO update table to say too big?
|
||||
return void Cryptpad.alert(Messages.upload_tooLarge);
|
||||
}
|
||||
if (e === 'NOT_ENOUGH_SPACE') {
|
||||
// TODO update table to say not enough space?
|
||||
return void Cryptpad.alert(Messages.upload_notEnoughSpace);
|
||||
}
|
||||
console.error(e);
|
||||
return void Cryptpad.alert(Messages.upload_serverError);
|
||||
};
|
||||
|
||||
var onPending = function (cb) {
|
||||
Cryptpad.confirm(Messages.upload_uploadPending, cb);
|
||||
};
|
||||
|
||||
sframeChan.on('EV_FILE_UPLOAD_STATE', function (data) {
|
||||
if (data.error) {
|
||||
return void onError(data.error);
|
||||
}
|
||||
if (data.complete && data.href) {
|
||||
return void onComplete(data.href);
|
||||
}
|
||||
if (typeof data.progress !== "undefined") {
|
||||
return void updateProgress(data.progress);
|
||||
}
|
||||
});
|
||||
sframeChan.on('Q_CANCEL_PENDING_FILE_UPLOAD', function (data, cb) {
|
||||
onPending(cb);
|
||||
});
|
||||
file.noStore = config.noStore;
|
||||
try {
|
||||
file.blob = Nacl.util.encodeBase64(u8);
|
||||
common.uploadFile(file, function () {
|
||||
console.log('Upload started...');
|
||||
});
|
||||
} catch (e) {
|
||||
Cryptpad.alert(Messages.upload_serverError);
|
||||
}
|
||||
};
|
||||
|
||||
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) {
|
||||
queue.to = window.setTimeout(function () {
|
||||
if (config.keepTable) { return; }
|
||||
File.$container.fadeOut();
|
||||
}, 3000);
|
||||
return;
|
||||
}
|
||||
if (queue.inProgress) { return; }
|
||||
File.$container.show();
|
||||
var file = queue.queue.shift();
|
||||
upload(file);
|
||||
};
|
||||
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 $link = $('<a>', {
|
||||
'class': 'upLink',
|
||||
'rel': 'noopener noreferrer'
|
||||
}).text(obj.metadata.name);
|
||||
|
||||
$('<td>').append($link).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 handleFile = File.handleFile = function (file, e, thumbnail) {
|
||||
var thumb;
|
||||
var finish = function (arrayBuffer) {
|
||||
var metadata = {
|
||||
name: file.name,
|
||||
type: file.type,
|
||||
};
|
||||
if (thumb) { metadata.thumbnail = thumb; }
|
||||
queue.push({
|
||||
blob: arrayBuffer,
|
||||
metadata: metadata,
|
||||
dropEvent: e
|
||||
});
|
||||
};
|
||||
|
||||
var processFile = function () {
|
||||
blobToArrayBuffer(file, function (e, buffer) {
|
||||
finish(buffer);
|
||||
});
|
||||
};
|
||||
|
||||
if (!thumbnail) { return void processFile(); }
|
||||
blobToArrayBuffer(thumbnail, function (e, buffer) {
|
||||
if (e) { console.error(e); }
|
||||
thumb = arrayBufferToString(buffer);
|
||||
processFile();
|
||||
});
|
||||
};
|
||||
|
||||
var onFileDrop = File.onFileDrop = function (file, e) {
|
||||
if (!common.isLoggedIn()) {
|
||||
return Cryptpad.alert(common.Messages.upload_mustLogin);
|
||||
}
|
||||
|
||||
Array.prototype.slice.call(file).forEach(function (d) {
|
||||
handleFile(d, e);
|
||||
});
|
||||
};
|
||||
|
||||
var createAreaHandlers = File.createDropArea = function ($area, $hoverArea) {
|
||||
var counter = 0;
|
||||
if (!$hoverArea) { $hoverArea = $area; }
|
||||
if (!$area) { return; }
|
||||
$hoverArea
|
||||
.on('dragenter', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
counter++;
|
||||
$hoverArea.addClass('hovering');
|
||||
})
|
||||
.on('dragleave', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
counter--;
|
||||
if (counter <= 0) {
|
||||
$hoverArea.removeClass('hovering');
|
||||
}
|
||||
});
|
||||
|
||||
$area
|
||||
.on('drag dragstart dragend dragover drop dragenter dragleave', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
})
|
||||
.on('drop', function (e) {
|
||||
e.stopPropagation();
|
||||
|
||||
var dropped = e.originalEvent.dataTransfer.files;
|
||||
counter = 0;
|
||||
$hoverArea.removeClass('hovering');
|
||||
onFileDrop(dropped, e);
|
||||
});
|
||||
};
|
||||
|
||||
var createUploader = function ($area, $hover, $body) {
|
||||
if (!config.noHandlers) {
|
||||
createAreaHandlers($area, null);
|
||||
}
|
||||
createTableContainer($body);
|
||||
};
|
||||
|
||||
createUploader(config.dropArea, config.hoverArea, config.body);
|
||||
|
||||
return File;
|
||||
};
|
||||
|
||||
return module;
|
||||
});
|
||||
@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CryptPad</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="referrer" content="no-referrer" />
|
||||
<script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
#sbox-iframe {
|
||||
position:fixed;
|
||||
top:0px;
|
||||
left:0px;
|
||||
bottom:0px;
|
||||
right:0px;
|
||||
width:100%;
|
||||
height:100%;
|
||||
border:none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
overflow:hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<iframe id="sbox-iframe">
|
||||
@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html style="height: 100%;">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||
<script async data-bootload="/filepicker/inner.js" data-main="/common/sframe-boot.js?ver=1.1" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||
<style> .loading-hidden { display: none; } </style>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -0,0 +1,63 @@
|
||||
define([
|
||||
'jquery',
|
||||
'/bower_components/chainpad-crypto/crypto.js',
|
||||
'/bower_components/textpatcher/TextPatcher.js',
|
||||
'/bower_components/chainpad-json-validator/json-ot.js',
|
||||
'/common/cryptpad-common.js',
|
||||
'/bower_components/nthen/index.js',
|
||||
'/common/sframe-common.js',
|
||||
|
||||
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
|
||||
'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
||||
'less!/customize/src/less/cryptpad.less',
|
||||
'less!/customize/src/less/toolbar.less',
|
||||
'less!/common/file-dialog.less',
|
||||
], function (
|
||||
$,
|
||||
Crypto,
|
||||
TextPatcher,
|
||||
JsonOT,
|
||||
Cryptpad,
|
||||
nThen,
|
||||
SFCommon)
|
||||
{
|
||||
var Messages = Cryptpad.Messages;
|
||||
|
||||
var APP = window.APP = {
|
||||
Cryptpad: Cryptpad,
|
||||
};
|
||||
|
||||
var onConnectError = function () {
|
||||
Cryptpad.errorLoadingScreen(Messages.websocketError);
|
||||
};
|
||||
|
||||
var andThen = function (common) {
|
||||
//var metadataMgr = common.getMetadataMgr();
|
||||
var $body = $('body');
|
||||
var cfg = {
|
||||
$body: $body,
|
||||
common: common
|
||||
};
|
||||
common.createFileDialog(cfg);
|
||||
Cryptpad.removeLoadingScreen();
|
||||
};
|
||||
|
||||
var main = function () {
|
||||
var common;
|
||||
|
||||
nThen(function (waitFor) {
|
||||
$(waitFor(function () {
|
||||
Cryptpad.addLoadingScreen();
|
||||
}));
|
||||
SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
|
||||
}).nThen(function (/*waitFor*/) {
|
||||
Cryptpad.onError(function (info) {
|
||||
if (info && info.type === "store") {
|
||||
onConnectError();
|
||||
}
|
||||
});
|
||||
andThen(common);
|
||||
});
|
||||
};
|
||||
main();
|
||||
});
|
||||
Loading…
Reference in New Issue