Django - Добавить несколько изображений для публикации объекта, используя Ajax

Question

Я пытаюсь добавить несколько изображений в сообщение, используя Ajax в Django, но мне не удается сделать это с моими текущими представлениями, так как при загрузке изображения я не вижу его добавленным к изображению список и мой индикатор не скрываются после того, как 100%. В настоящее время мне удалось успешно создать объект публикации, но я не знаю, как связать и изображения с публикацией до ее создания, сейчас ниже приведены мои коды:

home / views.py

class PostImageUpload(LoginRequiredMixin, View):

    def get(self, request):
        images = post.image_set.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)

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

home / models.py:

class Post(models.Model):
    title = models.CharField(max_length=100)
    content = models.TextField(validators=[MaxLengthValidator(250)])
    author = models.ForeignKey(Profile, on_delete=models.CASCADE)
    date_posted = models.DateTimeField(auto_now_add=True)
    last_edited= models.DateTimeField(auto_now=True)
    likes= models.ManyToManyField(Profile, blank=True, related_name='post_likes')

    def __str__(self):
        return self.subject

    def get_absolute_url(self):
        return reverse('home:home')

    def get_like_url(self):
        return reverse("home:like-toggle", kwargs={'pk': self.pk})

    def get_api_like_url(self):
        return reverse("home:like-api-toggle", kwargs={'pk': self.pk})

def image_create_uuid_p_u(instance, filename):
    return '/'.join(['post_images', str(instance.post.id), str(uuid.uuid4().hex + ".png")]) 
class Images(models.Model):
    post = models.ForeignKey(Post,on_delete=models.CASCADE)
    image = models.FileField(upload_to=image_create_uuid_p_u,verbose_name='Image')
    date_added = models.DateTimeField(auto_now_add=True)

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

$(document).ready(function(){

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

    $("#fileupload").fileupload({
      dataType: 'json',
      sequentialUploads: true,  
      start: (e)  =>  { 
        $("#container-progress").show();
      },
      stop: (e) =>  {  
        $("#container-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>"
          )
        }
      }
    });
});

мой js файл для создания сообщения:

$(document).ready(function(){
    var ShowForm = function(e){
        e.stopImmediatePropagation();
        var btn = $(this);
        $.ajax({
            url: btn.attr("data-url"),
            type: 'get',
            dataType:'json',
            beforeSend: function(){
                $('#modal-post').modal('show');
            },
            success: function(data){
                $('#modal-post .modal-content').html(data.html_form);
            }
        });
        return false;
    };

    var SaveForm =  function(e){
        e.stopImmediatePropagation();
        var form = $(this);
        $.ajax({
            url: form.attr('data-url'),
            data: form.serialize(),
            type: form.attr('method'),
            dataType: 'json',
            success: function(data){
                if(data.form_is_valid){
                    $('#post-list div').html(data.posts);
                    $('#modal-post').modal('hide');
                } else {
                    $('#modal-post .modal-content').html(data.html_form)
                }
            }
        })
        return false;
    }

//create
$('.create-post-btn').click(ShowForm);
$('#modal-post').on("submit",".post-create-form",SaveForm)

//update
$('#post-list').on("click",".show-form-update",ShowForm);
$('#modal-post').on("submit",".update-form",SaveForm)

//delete
$('#post-list').on("click",".show-form-delete",ShowForm);
$('#modal-post').on("submit",".delete-form",SaveForm)
});

Спасибо за помощь заранее!