Add progress bar to upload form

cps/static/js/main.js

@@ -164,6 +164,31 @@ $(function() {
             $(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() {
         $(".discover .row").isotope("reLayout");
     });

cps/templates/layout.html

@@ -56,6 +56,11 @@
               {% if g.user.role_upload() or g.user.role_admin()%}
                 {% if g.allow_upload %}
                     <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">
                         <div class="form-group">
                           <span class="btn btn-default btn-file">{{_('Upload')}} <input id="btn-upload" name="btn-upload" type="file"></span>