Handle chunks on backend and update UI with progress

Handle the uploaded chunks, enabling resumption of the upload if
incomplete.

Update the UI with the progress of the upload.

1 files changed, 39 insertions, 9 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 b9320ea..c6c79e5 100644
--- a/qc_app/templates/rqtl2/upload-rqtl2-bundle-step-01.html
+++ b/qc_app/templates/rqtl2/upload-rqtl2-bundle-step-01.html
@@ -58,13 +58,13 @@
             class="btn btn-danger"
             style="display: none">cancel upload</button>
   </div>
-  <div class="progress" style="display: none">
+  <div id="resumable-progress-bar" class="progress" style="display: none">
     <div class="progress-bar"
          role="progress-bar"
          aria-valuenow="60"
          aria-valuemin="0"
          aria-valuemax="100"
-         style="width: 60%;">
+         style="width: 0%;">
       Uploading: 60%
     </div>
   </div>
@@ -76,7 +76,10 @@
 	      population_id=population.InbredSetId)}}"
       method="POST"
       enctype="multipart/form-data"
-      data-resumable-action="/no/such/endpoint">
+      data-resumable-target="{{url_for(
+                             'upload.rqtl2.upload_rqtl2_bundle_chunked_post',
+                             species_id=species.SpeciesId,
+                             population_id=population.InbredSetId)}}">
   <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
   <input type="hidden" name="population_id"
 	 value="{{population.InbredSetId}}" />
@@ -138,7 +141,7 @@
   }
 
   var r = Resumable({
-      target: $("#frm-upload-rqtl2-bundle").attr("data-resumable-action"),
+      target: $("#frm-upload-rqtl2-bundle").attr("data-resumable-target"),
       fileType: ["zip"],
       maxFiles: 1,
       forceChunkSize: true,
@@ -164,7 +167,8 @@
       r.assignBrowse(document.getElementById("resumable-browse-button"));
 
       // Event handlers
-      r.on("filesAdded", function(files) {
+
+      function display_files(files) {
           displayArea = $("#resumable-selected-files")
           displayArea.empty();
           files.forEach((file) => {
@@ -190,10 +194,14 @@
                             + "</li>"));
               displayElement.find(".panel-body").append(list);
               displayElement.appendTo("#resumable-selected-files");
-              $("#resumable-upload-button").css("display", "");
-              $("#resumable-upload-button").on("click", (event) => {
-                  r.upload()
-              });
+          });
+      }
+
+      r.on("filesAdded", function(files) {
+          display_files(files);
+          $("#resumable-upload-button").css("display", "");
+          $("#resumable-upload-button").on("click", (event) => {
+              r.upload();
           });
       });
 
@@ -207,9 +215,31 @@
                   }
               });
               $("#resumable-cancel-upload-button").css("display", "none");
+              $("#resumable-upload-button").on("click", (event) => {
+                  r.files.forEach((file) => {file.retry();});
+              });
               $("#resumable-upload-button").css("display", "");
           });
       });
+
+      r.on("progress", () => {
+          var progress = (r.progress() * 100).toFixed(2);
+          var pbar = $("#resumable-progress-bar > .progress-bar");
+          $("#resumable-progress-bar").css("display", "");
+          pbar.css("width", progress+"%");
+          pbar.attr("aria-valuenow", progress);
+          pbar.text("Uploading: " + progress + "%");
+      })
+
+      r.on("fileSuccess", (file, message) => {
+          if(message != "OK") {
+              var uri = (window.location.protocol
+                         + "//"
+                         + window.location.host
+                         + message);
+              window.location.replace(uri);
+          }
+      });
   } else {
       setup_upload_handlers(
           "frm-upload-rqtl2-bundle", make_data_uploader(