Got progress upload working

interface/models.py

@@ -39,9 +39,9 @@ class Project(models.Model):
     def submissions(self):
         return self.all_submissions.filter(complete=True)
 
-    def presigned_post(self, object_name, fields={}, conditions=[], expires=3600):
+    def presigned_post(self, object_name, fields=None, conditions=None, expires=3600):
         key = os.path.join(slugify(self.name), object_name)
-        return s3client.generate_presigned_post(self.ensemble.bucket, key, Fields=fields, Conditions=conditions, ExpiresIn=expires)
+        return s3client.generate_presigned_post(self.ensemble.bucket, key, Fields=fields or {}, Conditions=conditions or [], ExpiresIn=expires)
 
     def __str__(self):
         return self.name

interface/static/interface/css/polyphonic.css

@@ -168,6 +168,23 @@ TEXTAREA {
     text-decoration: none;
 }
 
+/* PROGRESS BAR */
+
+.progress {
+    display: relative;
+    border: 1px solid var(--border-color);
+    border-radius: 5px;
+    margin: 20px 10px;
+}
+
+.progress-bar {
+    width: 5%;
+    height: 1.5em;
+    background-color: var(--light-blue);
+    border-radius: 5px;
+}
+
+
 A, A:visited {
     text-decoration: none;
     color: var(--gray-blue);

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 %}

interface/views.py

@@ -6,6 +6,8 @@ from datetime import datetime
 from . import models, forms
 from .decorators import check_allowed
 
+from base64 import b64decode
+
 import logging
 logger = logging.getLogger(__name__)
 
@@ -76,10 +78,14 @@ def submission(request, project_id):
 
             redirect = request.build_absolute_uri(resolve_url('complete_submission', project_id=project.pk, submission_id=s.pk))
 
-            upload = project.presigned_post(s.generate_key(),
+            key = s.generate_key()
+            #print("KEY:", key)
+            upload = project.presigned_post(key,
                     fields={'success_action_redirect': redirect}, 
                     conditions=[["starts-with", "$success_action_redirect", ""]])
-            context = {'upload': upload, 'project': project, 'submission': s}
+            ajax_post = project.presigned_post(key)
+            #print(b64decode(ajax_post['fields']['policy']))
+            context = {'upload': upload, 'ajax_post': ajax_post, 'project': project, 'submission': s}
 
             return render(request, 'interface/upload.html', context)
     else: