Extract upload progress indication code

* Extract the UI elements and code for indicating upload progress into
  separate, reusable "modules".
* Fix bugs arising from changes.

1 files changed, 24 insertions, 26 deletions

diff --git a/qc_app/templates/index.html b/qc_app/templates/index.html
index b9638d2..588133a 100644
--- a/qc_app/templates/index.html
+++ b/qc_app/templates/index.html
@@ -1,5 +1,6 @@
 {%extends "base.html"%}
-{%from "flash_messages.html" import flash_all_messages%}
+{%from "flash_messages.html" import flash_messages%}
+{%from "upload_progress_indicator.html" import upload_progress_indicator%}
 
 {%block title%}Data Upload{%endblock%}
 
@@ -54,17 +55,11 @@
 </div>
 
 <form action="{{url_for('entry.upload_file')}}"
-      method="POST" enctype="multipart/form-data">
+      method="POST"
+      enctype="multipart/form-data"
+      id="frm-upload-expression-data">
   <legend class="heading">upload expression data</legend>
-  {%with messages = get_flashed_messages(with_categories=True) %}
-  {%if messages %}
-  <div class="alerts">
-    {%for category, message in messages %}
-    <span class="alert {{category}}">{{message}}</span>
-    {%endfor%}
-  </div>
-  {%endif%}
-  {%endwith%}
+  {{flash_messages("error-expr-data")}}
 
   <fieldset>
     <label for="select_species01">Species</label>
@@ -108,20 +103,7 @@
   </fieldset>
 </form>
 
-<div id="progress-indicator" class="hidden">
-  <h3>Uploading file</h3>
-  <p id="progress-filename">the-file</p>
-  <progress id="progress-bar" value="0" max="100">
-    0
-  </progress>
-  <p id="progress-text">Uploading 0%</p>
-  <p id="progress-extra-text">Processing</p>
-  <form id="frm-cancel-upload" style="border-style: none;">
-    <button id="btn-cancel-upload" type="submit" class="btn btn-danger">
-      Cancel
-    </button>
-  </form>
-</div>
+{{upload_progress_indicator()}}
 
 <h2 class="heading">samples/cases</h2>
 
@@ -155,6 +137,22 @@
 {%block javascript%}
 <script type="text/javascript" src="static/js/upload_progress.js"></script>
 <script type="text/javascript">
-  setup_upload_handlers();
+  function setup_formdata(form) {
+      var formdata = new FormData();
+      formdata.append(
+	  "speciesid",
+	  form.querySelector("#select_species01").value)
+      formdata.append(
+	  "qc_text_file",
+	  form.querySelector("input[type='file']").files[0]);
+      formdata.append(
+	  "filetype",
+	  selected_filetype(
+	      Array.from(form.querySelectorAll("input[type='radio']"))));
+      return formdata;
+  }
+
+  setup_upload_handlers(
+      "frm-upload-expression-data", make_data_uploader(setup_formdata));
 </script>
 {%endblock%}