mirrors/calibre-web
1
0
Fork 0
mirror of https://github.com/janeczku/calibre-web synced 2025-10-30 23:03:02 +00:00
Code Issues Releases Wiki Activity

Add progress bar to upload form

Browse Source
This commit is contained in:
Louis Jencka
2017-09-02 11:51:11 -06:00
parent 81219663fe
commit b3217496d1
2 changed files with 30 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
cps/static/js/main.js
View File

@@ -164,6 +164,31 @@ $(function() {
$(this).find(".modal-body").html("..."); $(this).find(".modal-body").html("...");
}); });
$("#form-upload").ajaxForm({
beforeSend: function() {
// Replace upload button with progress bar
$("#upload-bar").width($("#form-upload").width());
$("#form-upload").hide();
$("#upload-bar").show();
var percentVal = "0%";
$("#upload-bar-val").width(percentVal);
$("#upload-bar-val").html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + "%";
$("#upload-bar-val").width(percentVal);
$("#upload-bar-val").html(percentVal);
},
error: function() {
$("#upload-bar").hide();
$("#form-upload").show();
alert("Upload failed.");
},
type: "post",
target: "html"
});
$(window).resize(function() { $(window).resize(function() {
$(".discover .row").isotope("reLayout"); $(".discover .row").isotope("reLayout");
}); });

5
cps/templates/layout.html
View File

@@ -56,6 +56,11 @@
{% if g.user.role_upload() or g.user.role_admin()%} {% if g.user.role_upload() or g.user.role_admin()%}
{% if g.allow_upload %} {% if g.allow_upload %}
<li> <li>
<div id="upload-bar" class="navbar-text progress" style="display: none;">
<div id="upload-bar-val" class="progress-bar">
0%
</div>
</div>
<form id="form-upload" class="navbar-form" action="{{ url_for('upload') }}" method="post" enctype="multipart/form-data"> <form id="form-upload" class="navbar-form" action="{{ url_for('upload') }}" method="post" enctype="multipart/form-data">
<div class="form-group"> <div class="form-group">
<span class="btn btn-default btn-file">{{_('Upload')}} <input id="btn-upload" name="btn-upload" type="file"></span> <span class="btn btn-default btn-file">{{_('Upload')}} <input id="btn-upload" name="btn-upload" type="file"></span>