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

Question

Не могу найти информацию о том, как загрузить изображение через мод django.Как загрузить файл через модальную форму django?

мой файл models.py

class Meal(models.Model):
    restaurant = models.ForeignKey(Restaurant, on_delete=models.CASCADE)
    name = models.CharField(max_length=500)
    short_description = models.CharField(max_length=500)
    image = models.ImageField(upload_to='meal_images/', blank=False)
    price = models.IntegerField(default=0)

    def __str__(self):
        return self.name

мой файл form.py

class MealForm(forms.ModelForm):
    class Meta:
        model = Meal
        exclude = ("restaurant",)

Что необходимо добавитьв views.py для обработки загрузки изображений views.py

def restaurant_add_meal(request):
    data = dict()
    if request.method == "POST":
        form = MealForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            data['form_is_valid'] = True
            meals = Meal.objects.all()
            data['meal_list'] = render_to_string('meal_list.html',{'meals':meals})
        else:
            data['form_is_valid'] = False
    else:
        form = MealForm()
    context = {
    'form': form
    }
    data['html_form'] = render_to_string('restaurant/add_meal.html', context, request=request)
    return JsonResponse(data)

Модальная форма add_meal.html

{% load crispy_forms_tags %}

<form method="POST" data-url="{% url 'restaurant-add-meal' %}" class="create-form" enctype="multipart/form-data">
    {% csrf_token %}
        <div class="modal-header bg-blue">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true" class="text-white">&times;</span>
            </button>
        <h4 class="modal-title text-center text-white" >Add Meal</h4>
        </div>
        <div class="modal-body">
        {{form|crispy}}
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-pink">Add Meal</button>
        </div>
</form>

ajax-код, который обрабатывает форму.Я не могу понять, чего здесь не хватает.

plugin.js

$(document).ready(function(){
    $('.show-form').click(function(){
        $.ajax({
            url: '/restaurant/meal/add',
            type: 'get',
            dataType:'json',
            beforeSend: function(){
                $('#modal-meal').modal('show');
            },
            success: function(data){
                $('#modal-meal .modal-content').html(data.html_form);
            }
        })
    })
    $('#modal-meal').on('submit','.create-form' , 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){
                    $('#meal-table tbody').html(data.meal_list);
                $('#modal-meal').modal('hide');
            } else {
                $('#modal-meal .modal-content').html(data.html_form)
            }
        }
        })
        return false;
    })
    });

Answer 1

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

$('#modal-meal').on('submit','.create-form' , function(){
    var form = $(this);
    var fd = new FormData(this);
    $.ajax({
        url: form.attr('data-url'),
        data: fd,
        type: form.attr('method'),
        dataType: 'json',
        processData: false,
        contentType: false,
        success: function(data){
            if(data.form_is_valid){
                $('#meal-table tbody').html(data.meal_list);
            $('#modal-meal').modal('hide');
        } else {
            $('#modal-meal .modal-content').html(data.html_form)
        }
    }
    })
    return false;
})