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

add progress bar to file upload

Browse Source
This commit is contained in:
ansuz
2017-05-18 17:57:42 +02:00
parent 164342920e
commit d324a054f2
2 changed files with 63 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
www/file/inner.html
View File

@@ -31,10 +31,28 @@
z-index: -1; z-index: -1;
} }
#upload-form {
padding: 0px;
margin: 0px;
position: relative;
width: 50vh;
height: 50vh;
display: block;
margin: auto;
}
#upload-form label{
position: relative;
}
.hovering {
background-color: rgba(255, 0, 115, 0.5) !important;
}
.block { .block {
display: block; display: block;
height: 500px; height: 50vh;
width: 500px; width: 50vh;
} }
.hidden { .hidden {
display: none; display: none;
@@ -43,6 +61,7 @@
border: 2px solid black; border: 2px solid black;
background-color: rgba(50, 50, 50, .10); background-color: rgba(50, 50, 50, .10);
margin: 50px; margin: 50px;
display: block;
} }
.inputfile:focus + label, .inputfile:focus + label,
@@ -50,13 +69,26 @@
background-color: rgba(50, 50, 50, 0.30); background-color: rgba(50, 50, 50, 0.30);
} }
#progress {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 0%;
max-width: 100%;
max-height: 100%;
background-color: rgba(255, 0, 115, 0.75);
z-index: 10000;
display: block;
}
</style> </style>
</head> </head>
<body> <body>
<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" class="block">Choose a file</label> <label for="file" class="block">Choose a file<span class="block" id="progress">&nbsp;</span></label>
</div> </div>
<div id="feedback" class="block hidden"> <div id="feedback" class="block hidden">
</div> </div>

30
www/file/main.js
View File

@@ -21,6 +21,8 @@ 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'); var $form = $iframe.find('#upload-form');
var $progress = $form.find('#progress');
var $label = $form.find('label');
Cryptpad.addLoadingScreen(); Cryptpad.addLoadingScreen();
@@ -54,8 +56,15 @@ define([
if (err) { throw new Error(err); } if (err) { throw new Error(err); }
if (box) { if (box) {
actual += box.length; actual += box.length;
var progress = (actual / estimate * 100) + '%';
console.log(progress);
return void sendChunk(box, function (e) { return void sendChunk(box, function (e) {
if (e) { return console.error(e); } if (e) { return console.error(e); }
$progress.css({
width: progress,
});
next(again); next(again);
}); });
} }
@@ -71,7 +80,7 @@ define([
console.log("encrypted blob is now available as %s", uri); console.log("encrypted blob is now available as %s", uri);
var b64Key = Nacl.util.encodeBase64(key); var b64Key = Nacl.util.encodeBase64(key);
window.location.hash = Cryptpad.getFileHashFromKeys(id, b64Key); Cryptpad.replaceHash(Cryptpad.getFileHashFromKeys(id, b64Key));
$form.hide(); $form.hide();
@@ -221,8 +230,25 @@ define([
handleFile(file); handleFile(file);
}); });
var counter = 0;
$label
.on('dragenter', function (e) {
e.preventDefault();
e.stopPropagation();
counter++;
$label.addClass('hovering');
})
.on('dragleave', function (e) {
e.preventDefault();
e.stopPropagation();
counter--;
if (counter <= 0) {
$label.removeClass('hovering'); // FIXME Can get stuck...
}
});
$form $form
.on('drag dragstart dragend dragover dragenter dragleave drop', function (e) { .on('drag dragstart dragend dragover drop dragenter dragleave', function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}) })