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

support drag and drop for file upload

Browse Source
This commit is contained in:
ansuz 2017-05-09 16:50:25 +02:00
parent 1d4d4cffdb
commit 521f99a3d6
2 changed files with 31 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
www/file/inner.html
View File

@ -30,11 +30,17 @@
position: absolute; position: absolute;
z-index: -1; z-index: -1;
} }
.inputfile + label {
border: 2px solid black; .block {
display: block; display: block;
height: 500px; height: 500px;
width: 500px; width: 500px;
}
.hidden {
display: none;
}
.inputfile + label {
border: 2px solid black;
background-color: rgba(50, 50, 50, .10); background-color: rgba(50, 50, 50, .10);
margin: 50px; margin: 50px;
} }
@ -50,7 +56,9 @@
<div id="toolbar" class="toolbar-container"></div> <div id="toolbar" class="toolbar-container"></div>
<div id="upload-form" style="display: none;"> <div id="upload-form" style="display: none;">
<input type="file" name="file" id="file" class="inputfile" /> <input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label> <label for="file" class="block">Choose a file</label>
</div>
<div id="feedback" class="block hidden">
</div> </div>
</body> </body>
</html> </html>

26
www/file/main.js
View File

@ -20,6 +20,7 @@ define([
var ifrw = $('#pad-iframe')[0].contentWindow; var ifrw = $('#pad-iframe')[0].contentWindow;
var $iframe = $('#pad-iframe').contents(); var $iframe = $('#pad-iframe').contents();
var $form = $iframe.find('#upload-form');
Cryptpad.addLoadingScreen(); Cryptpad.addLoadingScreen();
@ -85,7 +86,7 @@ define([
'' ''
].join('/'); ].join('/');
APP.$form.hide(); $form.hide();
var newU8 = FileCrypto.joinChunks(chunks); var newU8 = FileCrypto.joinChunks(chunks);
FileCrypto.decrypt(newU8, key, function (e, res) { FileCrypto.decrypt(newU8, key, function (e, res) {
@ -95,6 +96,7 @@ define([
var defaultName = Cryptpad.getDefaultName(Cryptpad.parsePadUrl(window.location.href)); var defaultName = Cryptpad.getDefaultName(Cryptpad.parsePadUrl(window.location.href));
APP.updateTitle(title || defaultName); APP.updateTitle(title || defaultName);
}); });
}); });
}); });
@ -128,8 +130,6 @@ define([
var andThen = function () { var andThen = function () {
var $bar = $iframe.find('.toolbar-container'); var $bar = $iframe.find('.toolbar-container');
// Test hash:
// #/2/K6xWU-LT9BJHCQcDCT-DcQ/TBo77200c0e-FdldQFcnQx4Y/
var secret; var secret;
var hexFileName; var hexFileName;
if (window.location.hash) { if (window.location.hash) {
@ -233,13 +233,12 @@ define([
return Cryptpad.alert("You must be logged in to upload files"); return Cryptpad.alert("You must be logged in to upload files");
} }
var $form = APP.$form = $iframe.find('#upload-form');
$form.css({ $form.css({
display: 'block', display: 'block',
}); });
$form.find("#file").on('change', function (e) { var handleFile = function (file) {
var file = e.target.files[0]; console.log(file);
var reader = new FileReader(); var reader = new FileReader();
reader.onloadend = function () { reader.onloadend = function () {
upload(this.result, { upload(this.result, {
@ -248,6 +247,21 @@ define([
}); });
}; };
reader.readAsArrayBuffer(file); reader.readAsArrayBuffer(file);
};
$form.find("#file").on('change', function (e) {
var file = e.target.files[0];
handleFile(file);
});
$form
.on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
e.preventDefault();
e.stopPropagation();
})
.on('drop', function (e) {
var dropped = e.originalEvent.dataTransfer.files;
handleFile(dropped[0]);
}); });
// we're in upload mode // we're in upload mode