Django Добавление нескольких файлов с помощью запроса Ajax не добавляет файлы правильно

Question

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

Ниже приведены мои представления для загрузки изображений и создания сообщения.

РЕДАКТИРОВАНИЕ:

@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)

ниже мой javascript код для загрузки файлов:

$(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>"
          )
        }
      }
    });
});

ниже - мой post_create. html шаблон:

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

            <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="files[]" 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 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>

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

РЕДАКТИРОВАТЬ: я изменил свой шаблон пост-создания, чтобы получать объекты изображений после сохранения поста, и мой план состоит в том, чтобы сохранить сообщение, затем назначьте первичный ключ сообщения изображениям покупки, кажется, что мой взгляд все еще не работает.