Add template for bulk upload.

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

@@ -0,0 +1,123 @@
+{% extends "admin/change_form.html" %}
+{% load i18n admin_urls %}
+{% load static %}
+
+{% block extrastyle %}
+  {{ block.super }}
+  <style>
+    #overlay {
+      color: white;
+      background: rgba(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);
+      // 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 %}