Django rest framework отправляет данные формы

Мне нужно создать страницу формы с несколькими загрузками изображений, используя CRUD функции, которые я сделал. При отправке страница не должна перезагружаться, поэтому я использую ajax для выполнения запроса. Сериализатор продолжает выдавать ошибку 400 (Bad request). Возможно, FormData строчит некоторые значения, которые не должны, и сериализатор не позволяет мне добавить элемент. Помогите пожалуйста, я уже второй день гуглю разные подходы к этому и ни один из них не сработал.

.

views.py

@api_view(['GET'])
def index(request):
    imageform = ImageForm()
    form = CreateShopItemForm()

    return render(request, 'main/index.html', {"form": form, "imageform": imageform})


@api_view(['POST'])
def create_item(request):
    shop_item = ShopItemSerializer(data=request.data)
    print(request.data)
    if shop_item.is_valid(raise_exception=True):
        shop_item.save()
        print('success')
        return Response(shop_item.data)
    else:
        print("invalid")
        return Response(status=status.HTTP_404_NOT_FOUND)

models.py

class ShopItems(models.Model):
    item_name = models.CharField(max_length=100, null=False, blank=False)
    item_price = models.FloatField(null=False)
    item_author = models.CharField(max_length=100, null=False, blank=False)
    date = models.DateField(auto_now_add=True, editable=False)

class Image(models.Model):
    shop_item = models.ForeignKey(ShopItems, on_delete=models.CASCADE, related_name="images")
    image = models.ImageField()

serializers.py

class ImageSerializer(serializers.ModelSerializer):
    class Meta:
        model = Image
        fields = ['image',]

class ShopItemSerializer(serializers.ModelSerializer):
    images = ImageSerializer(many=True)

    def create(self, validated_data):
        images_data = validated_data.pop("images")
        shop_item = ShopItems.objects.create(validated_data)
        for image_data in images_data:
            Image.objects.create(shop_item=shop_item, song=image_data)
        return shop_item
    
    class Meta:
        model = ShopItems
        fields = [
            'item_name',
            'item_price',
            'item_author',
            'date',
            'images',
        ]

script.js

$("#addItemForm").on("submit", function (e) {
        e.preventDefault();
        let data = new FormData($(this)[0]);

        $.ajax({
            url: $(this).attr('action'),
            type:"POST",
            processData: false,
            contentType: false,
            data: data,
            success: function (response) {
                console.log('response')
                $("input:not([type=\"submit\"])").val("");
            },
            error: function (error) {
                console.log(error)
            }
        });
    });

Как вы видите, есть поле float, и объект FormData преобразует его в строку. Я не уверен, что это причина ошибки, но это также должно быть исправлено. Это request.data напечатано

<QueryDict: {'csrfmiddlewaretoken': ['T7bZitlYZA9UKuz0x6j6YZXh8brp5krBmSJIwbYgaMDbLdi0UVXvKmHw5VAZ6rY7'], 'item_name': ['First'], 'item_price': ['32'], 'item_author': ['Alin'], 'image': [<InMemoryUploadedFile: 3f9470b34a8e3f526dbdb022f9f19cf7-removebg-preview.png (image/png)>]}>

.

Вернуться на верх