Загрузка файлов в Django с использованием jQuery

Question

Я пытаюсь загрузить несколько файлов для объекта сообщения в блоге, однако, похоже, что моя форма Ajax не работает должным образом, и я не вижу загружаемых файлов.

Поскольку во время создания изображений объект записи не существует, я пытаюсь загрузить файлы, затем получить их в моем представлении, и после сохранения сообщения я пытаюсь сохранить эти файлы, назначив идентификатор для этот пост им. В настоящее время моя проблема, кажется, мои файлы не загружаются, и я не могу получить их вообще.

Я не получаю никакой ошибки, и, следовательно, я не могу найти проблему.

Ниже представлен вид загрузки файла и создания записи:

@login_required
def post_create(request):
    data = dict()
    if request.method == 'POST':
        form = PostForm(request.POST)
        if form.is_valid():    
            post = form.save(False)
            post.author = request.user
            #post.likes = None
            post.save()
            for image in request.FILES.getlist('file'):
                instance = Images(post=Post.objects.get(post.id),image=image)
                instance.save()
            data['form_is_valid'] = True
            posts = Post.objects.all()
            posts = Post.objects.order_by('-last_edited')
            data['posts'] = render_to_string('home/posts/home_post.html',{'posts':posts},request=request)
        else:
            data['form_is_valid'] = False
    else:
        form = PostForm       
    context = {
    'form':form
    }
    data['html_form'] = render_to_string('home/posts/post_create.html',context,request=request)
    return JsonResponse(data) 

class PostImageUpload(LoginRequiredMixin, View):

    def get(self, request):
        images = Images.objects.all()
        return render(self.request, 'home/posts/post_create.html', {'images':images} ) 

    def post(self, request):
        data = dict()
        form = ImageForm(self.request.POST, self.request.FILES)
        if form.is_valid():
            image = form.save(False)
            image.save()
            data = {'is_valid': True, 'name': image.file.name, 'url': image.file.url} 
        else:
            data['is_valid'] = False
        return JsonResponse(data)

This my javascript code:

$(document).ready(function(){

    $(".js-upload-images").click(function () {
      $("#fileupload").click();
    });

    $("#fileupload").fileupload({
      change : function (e, data) {
        if(data.files.length >= 4){
            alert("Sorry, you can only upload up to 4 images")
            return false;
        }
      },
      dataType: 'json',
      sequentialUploads: true,  
      start: function (e)  { 
        $("#modal-progress").show();
      },
      stop: function (e) {  
        $("#modal-progress").hide();
      },
      progressall: function (e, data) {  
        var progress = parseInt(data.loaded / data.total * 100, 10);
        var strProgress = progress + "%";
        $(".progress-bar").css({"width": strProgress});
        $(".progress-bar").text(strProgress);
      },
      done: function (e, data) {
        if (data.result.is_valid) {
          $("#image_list tbody").prepend(
            "<tr><td><a href='" + data.result.url + "'>" + data.result.name + "</a></td></tr>"
          )
        }
      }
    });
});

HTML Code

{% load crispy_forms_tags %}
{% load static %}
    <script src="{% static 'js/image_upload.js' %}"></script>
    <script src="{% static 'js/jquery-file-upload/js/vendor/jquery.ui.widget.js' %}"></script>
    <script src="{% static 'js/jquery-file-upload/js/jquery.iframe-transport.js' %}"></script>
    <script src="{% static 'js/jquery-file-upload/js/jquery.fileupload.js' %}"></script>

<form method="POST" data-url="{% url 'home:post-create' %}" class="post-create-form">
    {% csrf_token %}
        <div class="modal-header">
            <h5 class="modal-title" >Create a Post</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            {{ form|crispy }}
        <div class="my-3 mx-3">
            <button type="button" class="btn btn-sm mr-auto btn-primary js-upload-images">
                <span><i class="fas fa-camera"></i></span>
                </button>
                <input id="fileupload" type="file" name="file" multiple
                        style="display: none;"
                        data-url="{% url 'home:post-image-upload'  %}"
                        data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'>

                <table id="image_list" class="table table-bordered my-2">
                <tbody>
                    {% for image in images %}
                    <tr>
                        <td><a href="{{ image.file.url }}">{{ image.file.name }}</a></td>
                    </tr>
                    {% endfor %}
                </tbody>
                </table>
            </div>
    </div>
    <div class="modal fade" id="modal-progress" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Uploading...</h4>
            </div>
            <div class="modal-body">
                <div class="progress">
                <div class="progress-bar" role="progressbar" style="width: 0%;">0%</div>
                </div>
            </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Post</button>
    </div>
</form>

Используемая мной среда загрузки файлов работает так же, как я вижу в терминале Django успешно завершает получить запрос.

Заранее благодарен за помощь!