Прогресс бар Загрузить на S3 Django

Question

Я хотел бы показать индикатор выполнения загрузки для загрузок S3 с сайта Django. В настоящее время, когда индикатор выполнения не управляется JQuery, загрузка работает прямо на S3. После того, как я попытаюсь реализовать индикатор выполнения, используя JQuery, форма загрузки все еще функционирует как принимающая ввод и файл, но не будет передавать файл на S3.

Вот представление загрузки:

from .forms import UploadForm

def upload(request):
    if request.method == 'POST':
        form = UploadForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            return redirect('upload')

    else:
        form = UploadForm()

    context = {
        'form': form
    }

    return render(request, 'content/upload.html', context)

Вот HTML:

{% extends "about/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
{% block navbar %}{% endblock %}

<div class="site-section mb-5">
  <div class="container">
   <div class="form-register">
     <form method="POST" enctype="multipart/form-data">
         {% csrf_token %}
             <legend>Upload Content</legend>
             <div class="form-group">
               {{ form | crispy }}
            </div>
             <button class="btn btn-outline-info" type="submit">Upload</button>
     </form>

     <div class="progress">
        <div id="progressBar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
           0%
        </div>
      </div>
    </div>
  </div>
{% endblock %}

Вот JQuery:

$(document).ready(function() {

    $('form').on('submit', function(event) {

        event.preventDefault();

        var formData = new FormData($('form')[0]);

        $.ajax({
            xhr : function() {
                var xhr = new window.XMLHttpRequest();

                xhr.upload.addEventListener('progress', function(e) {

                    if (e.lengthComputable) {

                        console.log('Bytes Loaded: ' + e.loaded);
                        console.log('Total Size: ' + e.total);
                        console.log('Percentage Uploaded: ' + (e.loaded / e.total))

                        var percent = Math.round((e.loaded / e.total) * 100);

                        $('#progressBar').attr('aria-valuenow', percent).css('width', percent + '%').text(percent + '%');

                    }

                });

                return xhr;
            },
            type : 'POST',
            url : '/upload',
            data : formData,
            processData : false,
            contentType : false,
            success : function() {
                alert('File uploaded!');
            }
        });

    });

});

Я предполагаю, что есть что-то, что мне нужно изменить в JQuery так как я переопределяю действие кнопки submit по умолчанию, но я не уверен, что именно изменить, чтобы убедиться, что файл отправляется на S3 через django-storages и boto3, пакеты используются для связи с S3 ,