From b3217496d14e6050431e1a51efb4bf4888c0222b Mon Sep 17 00:00:00 2001
From: Louis Jencka <louis@jencka.us>
Date: Sat, 2 Sep 2017 11:51:11 -0600
Subject: [PATCH] Add progress bar to upload form

---
 cps/static/js/main.js     | 25 +++++++++++++++++++++++++
 cps/templates/layout.html |  5 +++++
 2 files changed, 30 insertions(+)

diff --git a/cps/static/js/main.js b/cps/static/js/main.js
index 267c6d97..97eadc1f 100644
--- a/cps/static/js/main.js
+++ b/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");
     });
diff --git a/cps/templates/layout.html b/cps/templates/layout.html
index 2a5343af..f01a0927 100644
--- a/cps/templates/layout.html
+++ b/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>