Got progress upload working

interface/templates/base.html

@@ -44,7 +44,9 @@
   </div>
 
   <!-- late load scripts -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://kit.fontawesome.com/c837098e5b.js" crossorigin="anonymous"></script>
-  
+  {% block scripts %}
+  {% endblock %} 
   </body>
 </html>

interface/templates/interface/upload.html

@@ -13,15 +13,83 @@
 
         <input name="file" type="file" accept="video/*" />
 
+        <div class="progress">
+            <div class="progress-bar"></div>
+        </div>
+        
         <div class="form-actions text-right">
             <a class=""
                 href="{% url 'cancel_submission' project_id=project.pk submission_id=submission.pk %}">Cancel</a>
             &nbsp;
-            <button class="">Upload</button>
+            <button type="submit" id="upload">Upload</button>
         </div>
+        <div id="status">Select a file to upload</div>
     </form>
 </div>
 
 </div>
 
+{% endblock %}
+
+{% block scripts %}
+<script src="http://malsup.github.com/jquery.form.js"></script>
+<script>
+
+function enableUpload(e) {
+    $('#upload').attr('disabled', false);
+    $('#status').html('Ready to upload');
+}
+
+function startUpload(e) {
+    
+    var bar = $('.progress-bar');
+    var percent = $('.percent');
+    var status = $('#status');
+
+    console.log("STARTING");
+    e.target.disabled = true;
+
+    //$('input[name="file"]').attr('disabled', true);
+
+    // patch form
+    $('input[name="policy"]').val("{{ ajax_post.fields.policy }}");
+    $('input[name="signature"]').val("{{ ajax_post.fields.signature }}");
+    $('input[name="success_action_redirect"]').remove();
+
+    $('form').ajaxForm({
+        beforeSend: function() {
+            status.html("Starting upload");
+            var percentVal = '0%';
+            bar.width(percentVal)
+            percent.html(percentVal);
+        },
+        uploadProgress: function(event, position, total, percentComplete) {
+            var percentVal = percentComplete + '%';
+            bar.width(percentVal)
+            percent.html(percentVal);
+        },
+        success: function() {
+            console.log("success");
+            var percentVal = '100%';
+            bar.width(percentVal)
+            percent.html(percentVal);
+        },
+        complete: function(xhr) {
+            if (xhr.status == 204) {
+                status.html("Finished upload");
+                console.log(xhr);
+                //location.href = "{{ upload.fields.success_action_redirect }}";
+            } else {
+                status.html("Something went wrong");
+                console.log(xhr.responseText);
+            }
+        }
+    }); 
+}
+
+$('input[name="file"]').on('change', enableUpload);
+$('#upload').on('click', startUpload).attr('disabled', true);
+
+</script>
+
 {% endblock %}