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, 26 insertions, 2 deletions

diff --git a/qc_app/templates/rqtl2/upload-rqtl2-bundle-step-01.html b/qc_app/templates/rqtl2/upload-rqtl2-bundle-step-01.html
index 64fcdcd..eaa68a9 100644
--- a/qc_app/templates/rqtl2/upload-rqtl2-bundle-step-01.html
+++ b/qc_app/templates/rqtl2/upload-rqtl2-bundle-step-01.html
@@ -1,11 +1,14 @@
 {%extends "base.html"%}
 {%from "flash_messages.html" import flash_all_messages%}
+{%from "upload_progress_indicator.html" import upload_progress_indicator%}
 
 {%block title%}Upload R/qtl2 Bundle{%endblock%}
 
 {%block contents%}
 <h2 class="heading">Upload R/qtl2 Bundle</h2>
 
+{{upload_progress_indicator()}}
+
 <form id="frm-upload-rqtl2-bundle"
       action="{{url_for('upload.rqtl2.upload_rqtl2_bundle',
 	      species_id=species.SpeciesId,
@@ -20,8 +23,8 @@
 
   <fieldset>
     <legend>file upload</legend>
-    <label for="file:rqtl2-bundle">R/qtl2 bundle</label>
-    <input type="file" id="file:rqtl2-bundle" name="rqtl2_bundle_file"
+    <label for="file-rqtl2-bundle">R/qtl2 bundle</label>
+    <input type="file" id="file-rqtl2-bundle" name="rqtl2_bundle_file"
 	   accept="application/zip, .zip"
 	   required="required" />
     <span class="form-input-help"><p>Provide a valid R/qtl2 zip file here. In
@@ -42,3 +45,24 @@
 </form>
 
 {%endblock%}
+
+{%block javascript%}
+<script type="text/javascript" src="/static/js/upload_progress.js"></script>
+<script type="text/javascript">
+  setup_upload_handlers(
+      "frm-upload-rqtl2-bundle", make_data_uploader(
+	  function (form) {
+	      var formdata = new FormData();
+	      formdata.append(
+		  "species_id",
+		  form.querySelector('input[name="species_id"]').value);
+	      formdata.append(
+		  "population_id",
+		  form.querySelector('input[name="population_id"]').value);
+	      formdata.append(
+		  "rqtl2_bundle_file",
+		  form.querySelector("#file-rqtl2-bundle").files[0]);
+	      return formdata;
+	  }));
+</script>
+{%endblock%}