Add form html for bulk

readux_ingest_ecds/forms.py

@@ -6,20 +6,6 @@ class MultipleFileInput(forms.ClearableFileInput):
     allow_multiple_selected = True
 
 
-class MultipleFileField(forms.FileField):
-    def __init__(self, *args, **kwargs):
-        kwargs.setdefault("widget", MultipleFileInput())
-        super().__init__(*args, **kwargs)
-
-    def clean(self, data, initial=None):
-        single_file_clean = super().clean
-        if isinstance(data, (list, tuple)):
-            result = [single_file_clean(d, initial) for d in data]
-        else:
-            result = [single_file_clean(data, initial)]
-        return result
-
-
 class BulkVolumeUploadForm(forms.ModelForm):
     class Meta:
         model = Bulk

readux_ingest_ecds/templates/admin/readux_ingest_ecds/bulk/change_form.html

@@ -0,0 +1,136 @@
+{% extends "admin/change_form.html" %} {% load i18n admin_urls %} {% load static
+%} {% block extrastyle %} {{ block.super }}
+<style>
+  #overlay {
+    color: white;
+    background: rgba(0, 0, 0, 0.5);
+    height: 100vh;
+    font-size: 3rem;
+    left: 0;
+    position: absolute;
+    text-align: center;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  .hide-overlay {
+    display: none !important;
+  }
+  #overlay-progress-container {
+    height: 32px;
+  }
+  #overlay-warning-container {
+    margin-top: 3rem;
+    width: 50%;
+  }
+  .overlay-warning {
+    font-size: 1rem;
+    color: white !important;
+  }
+</style>
+{% endblock %} {% block submit_buttons_bottom %}
+<div class="submit-row">
+  <input
+    type="submit"
+    value="{% trans 'Save and add another' %}"
+    id="add_another"
+    name="_addanother"
+    {{
+    onclick_attrib
+    }}
+  />
+  <input
+    type="submit"
+    value="{% trans 'Save' %}"
+    class="default"
+    id="start_upload"
+    name="_save"
+  />
+</div>
+{% endblock %} {% block admin_change_form_document_ready %} {{ block.super }}
+<script type="text/javascript">
+  // for each form on the page...
+  let bulkForm = django.jQuery("#bulk_form"); // define context and reference
+  django.jQuery("input:submit", bulkForm).bind("click keypress", function () {
+    bulkForm.data("callerid", this.id);
+  });
+  bulkForm.on("submit", (e) => {
+    e.preventDefault();
+
+    const overlay = django.jQuery("#overlay");
+    const label = document.getElementById("overlay-label");
+    const percentage = document.getElementById("overlay-percentage");
+    const progressBar = document.getElementById("overlay-progress");
+    const buttonUsed = django.jQuery("#bulk_form").data("callerid");
+
+    // Set up POST req
+    const form = e.currentTarget;
+    const url = form.action;
+    let xhr = new XMLHttpRequest();
+
+    // Add event handlers
+    xhr.upload.onloadstart = (e) => {
+      // Show overlay
+      overlay.removeClass("hide-overlay");
+      percentage.textContent = "0%";
+      label.textContent = "Uploading...";
+    };
+
+    xhr.upload.onprogress = (e) => {
+      const percent = e.lengthComputable ? (e.loaded / e.total) * 100 : 0;
+      progressBar.value = percent.toFixed(2);
+      progressBar.setAttribute("aria-valuenow", percent.toFixed(2));
+      percentage.textContent = percent.toFixed(2) + "%";
+    };
+
+    xhr.upload.onloadend = (e) => {
+      label.textContent = "Upload complete, please wait...";
+    };
+
+    function handleError(e) {
+      errored = true;
+      label.textContent = "Error: Please see dev tools console for details";
+    }
+
+    xhr.upload.addEventListener("abort", handleError);
+    xhr.upload.addEventListener("error", handleError);
+    xhr.addEventListener("abort", handleError);
+    xhr.addEventListener("error", handleError);
+
+    xhr.onreadystatechange = (e) => {
+      if (xhr.readyState == XMLHttpRequest.DONE) {
+        if (buttonUsed === "start_upload") {
+          location.href = "/admin/ingest/ingesttaskwatcher/";
+        } else {
+          location.reload();
+        }
+      }
+    };
+    // Send POST req
+    xhr.open("POST", url, true);
+    xhr.send(new FormData(form));
+  });
+</script>
+{% endblock %} {% block content %} {{ block.super }}
+<div id="overlay" class="hide-overlay">
+  <div id="overlay-label">Uploading...</div>
+  <div id="overlay-percentage">0%</div>
+  <div id="overlay-progress-container">
+    <progress id="overlay-progress" value="0" max="100"></progress>
+  </div>
+  <div id="overlay-warning-container">
+    <p class="overlay-warning">
+      <strong>You must leave this window open during upload.</strong>
+    </p>
+    <p class="overlay-warning">
+      Once upload completes, you will be sent to a new page. You may then
+      navigate away while the rest of the ingest completes; you will receive an
+      email to notify you when the ingest has completed.
+    </p>
+  </div>
+</div>
+{% endblock %}