Как загрузить и сохранить изображение и форму, используя модалы django и ajax bootstrap?

Question

Как загрузить и сохранить изображение и форму, используя модалы django и ajax bootstrap Я пытаюсь сохранить изображение и форму, используя Django и ajax. Когда пытаетесь спасти, не сохраняйте, и я не знаю почему. кто-то может помочь мне, почему причина.

I want to save image and form but when i try it to do it and nothing is wrong and i don't know why.

, поэтому мне нужно сохранить изображение с формой

Views.py:

def save_all(request,form,template_name):
    #function save articles
    data = dict()
    if request.method == 'POST':
        form = ArticlesForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            data['form_is_valid'] = True
            article = Articles.objects.all()
            data['feed'] = render_to_string('inventory/list_feed.html',{'article':article})
        else:
            data['form_is_valid'] = False
    context = {
    'form':form
    }
    data['html_form'] = render_to_string(template_name,context,request=request)
    return JsonResponse(data)

def create_article(request):
    #function add articles
    if request.method == 'POST':
        form = ArticlesForm(request.POST, request.FILES)
    else:
        form = ArticlesForm()
    return save_all(request,form,'inventory/create_article.html')

forms.py:

#Django
from django.contrib.auth.models import User
from django import forms
#models
from inventory.models import Articles

class ArticlesForm(forms.ModelForm):
    #Article Form
    class Meta():
        model = Articles
        fields = (
                'name','quantity',
                'fk_brand','model','fk_category', 
                'coust_buy','fk_supplier','userful_life','actual_state',
                'date_check','fk_user','fk_microbusiness','location','img',
                'description')
        labels = {
                'name':'','quantity':'',
                'fk_brand':'','model':'','fk_category':'', 
                'coust_buy':'','fk_supplier':'','userful_life':'','actual_state':'',
                'date_check':'','fk_user':'','fk_microbusiness':'','location':'','img':'',
                'description':'',}
        widgets = {
                'img': forms.FileInput(attrs={'type': 'file'}),
                }

models.py:

class Articles(models.Model):
    #models article
    Nuevo = 'Nuevo_1'
    Semi_nuevo = 'Semi_nuevo_2'
    Usado = 'Usado_3'
    Otros = 'Otros_4'
    STATE_ACTUAL = (
        (Nuevo, 'Nuevo'),
        (Semi_nuevo,'Semi_nuevo'),
        (Usado,'Usado'),
        (Otros,'Otros')
    )
    name = models.CharField(max_length=50)
    quantity = models.DecimalField(max_digits=10, decimal_places=4)
    fk_brand = models.ForeignKey(Brand, null=True, on_delete=models.CASCADE)
    model = models.CharField(max_length=50)
    fk_category = models.ForeignKey(Category, null=True, on_delete=models.CASCADE)
    coust_buy = models.DecimalField(max_digits=10, decimal_places=2)
    fk_supplier = models.ForeignKey(Supplier, null=True, on_delete=models.CASCADE)
    userful_life = models.DateField()
    actual_state = models.CharField(max_length=12, choices=STATE_ACTUAL)
    date_check = models.DateField()
    fk_user = models.ForeignKey(User, null=True, on_delete=models.CASCADE)
    fk_microbusiness = models.ForeignKey(MicroBusiness, null=True, on_delete=models.CASCADE)
    location = models.CharField(max_length=50)
    img = models.ImageField(upload_to='inventory/articles')
    description = models.TextField(blank=True)
    #actions
    created = models.DateTimeField(auto_now_add=True)
    update = models.DateTimeField(auto_now=True)

    class Meta:
        verbose_name = 'Article'
        verbose_name_plural = 'Articles'

    def __str__(self):
        return self.name

action. js:

$(document).ready(function(){
    var ShowForm = function(){
        var btn = $(this);
        $.ajax({
            url: btn.attr("data-url"),
            type: 'get',
            dataType:'json',
            beforeSend: function(){
                $('#modal-action').modal('show');
            },
            success: function(data){
                $('#modal-action .modal-content').html(data.html_form);
            }
        });
    };
    var SaveForm =  function(){
        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){
                    $('#all-table ul').html(data.feed);
                    $('#modal-action').modal('hide');
                } else {
                    $('#modal-action .modal-content').html(data.html_form)
                }
            }
        })
        return false;
    }
//create 
$(".show-form").click(ShowForm);
$("#modal-action").on("submit",".create-form",SaveForm);
});