TypeError: Объект типа ImageFieldFile не является JSON сериализуемым - django

Я пытаюсь сделать сообщение через ajax запрос и JsonResponse но когда я пытаюсь загрузить изображение в форму и отправить ее, она выдает эту ошибку со стороны сервера :

TypeError: Объект типа ImageFieldFile не является JSON сериализуемым

и эта ошибка со стороны клиента (в консольном браузере)

Uncaught TypeError: Illegal invocation

и вот мой models.py

class ModelCategory(models.Model):
    admin = models.ForeignKey(User,on_delete=models.PROTECT)
    category = models.ForeignKey(Category,on_delete=models.PROTECT)
    model = models.CharField(max_length=40)    
    giga = models.ForeignKey(Giga,on_delete=models.PROTECT)
    image = models.ImageField(upload_to=image_model,blank=True,null=True)

    def __str__(self):
        return f'{self.model}-{self.giga.giga_byte}'

    class Meta:
        constraints = [
            models.UniqueConstraint(fields=['category','model','giga'],name='model_name')
        ]

и мой views.py

@login_required
def create_modelcategory(request):
    form = ModelCategoryForm()
    if request.is_ajax() and request.method == 'POST':
        form = ModelCategoryForm(request.POST,request.FILES)
        if form.is_valid():
            obj = form.save(commit=False)
            obj.admin = request.user
            obj.save()
            data = {
               'id':obj.id,
               'admin':obj.admin.username,
               'category':obj.category.category,                    
               'model':obj.model,
               'giga':obj.giga.giga_byte,
               'img':obj.image.url,
                }
           return JsonResponse({'success':True,'data':data},status=200)
        else:
           return JsonResponse({'sucess':False,'error_msg':form.errors},status=400)
    context = {
       'form':form
    }

    return render(request,'storage/modelcategory.html',context)

и вот мой html и функции jquery-ajax

            <form action="" method="POST" id="create-modelcategory" enctype="multipart/form-data">{% csrf_token %}        

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                    <i class="fab fa-buromobelexperte"></i>
                    <label>category</label>
                    {{ form.category | add_class:'form-control' }}
                    </div>
                    <p class="text-danger text-center" hidden id="category_error"></p>
                </div>
                <!-- /.col -->
                <div class="col-md-6">
                    <div class="form-group">
                    <i class="fas fa-mobile-alt"></i>
                    <label>model</label>
                    {{form.model | add_class:'form-control'}}
                    </div>
                    <p class="text-danger text-center" hidden id="model_error"></p>
                    <!-- /.form-group -->
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                    <i class="fas fa-sd-card"></i>
                    <label>giga</label>
                    {{ form.giga | add_class:'form-control' }}
                    </div>
                    <p class="text-danger text-center" hidden id="giga_error"></p>
                </div>  
                <div class="col-md-12 col-12">
                    <div class="form-group text-center ">
                    <i class="far fa-image"></i>
                    <label class="">image</label> 
                    {{ form.image | add_class:'form-control' }}
                    </div>
                    <p class="text-danger text-center" hidden id="image_error"></p>                    
                    <!-- /.form-group -->
                    <div class="img-box"></div>
                </div>                                                        
            <!-- /.col -->
            </div>
            <!-- /.row -->
            <div class="card-footer">
                <div class="row justify-content-center">
                    <button type="submit" class="btn btn-lg btn-success">زیادکردن</button>
                </div>
            </div>
        </form>

есть ли что-то, что я пропустил, чтобы добавить? или если это не правильный способ сохранить данные изображения в базу данных через ajax и jsonresponse, пожалуйста, дайте мне знать .

Я очень признателен за вашу помощь ..

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