Error in uploading image from a form into django model using django rest framework

[mostafamohamed198]

I am building a website using Django,React and DRF. I want to create a form that enters data into a model containing image field. I have followed many tutorials to make this but I have failed to upload image into the Image field

models.py:

class entry(models.Model):
    title = models.CharField(max_length=600)
    body = models.TextField()
    entryCover = models.ImageField(upload_to='entrycover', blank=True, null=True)

    def __str__ (self):
        return self.title

serializers.py:

class EntryFormSerializer(serializers.ModelSerializer):
    entryCover = serializers.ImageField(required=False)
  
    class Meta:
        model = entry
        fields = ['title', 'body', 'entryCover']

views.py:

class EntryFormViewSet(viewsets.ModelViewSet):
     queryset = entry.objects.all()
     serializer_class = EntryFormSerializer
     parser_classes = (MultiPartParser, FormParser)
     def post(self, serializer):
         serializer.save(creator=self.request.user)

urls.py:

urlpatterns = [
    path('entryForm/', views.EntryFormViewSet)
]

in Form.js:

import React from "react";
import Select from 'react-select'
import axios from 'axios';
import { AxiosInstance } from "axios";

export default function Form(){
    const [inputs, setInputs] = React.useState({});
   
  

  const handleImageChange = (e) => {
    console.log(e.target.files[0])
    let image = e.target.files[0]
    setInputs(values => ({...values,'entryCover' : image}))
};
    
    const handleChange = (event) => {
        const name = event.target.name;
        const value = event.target.value;
        setInputs(values => ({...values, [name]: value}))
      
      }
    
      const handleSubmit = (event) => {

        event.preventDefault()
        let form_data = new FormData();
    form_data.append('entryCover', inputs.entryCover, inputs.entryCover.name);
    form_data.append('title', inputs.title);
    form_data.append('body', inputs.body);
  
        axios.post('/entryForm/', form_data, {
          headers: {
              'Content-Type': 'multipart/form-data'
          }
      }).then(res => {
          console.log(res);
      }).catch(err => {
          console.log(err.response.data);
      })
        
      }

  
    return(
        <form onSubmit={handleSubmit}>
        <label>title
        <input 
          type="text" 
          name="title" 
          value={inputs.title || ""} 
          onChange={handleChange}
        />
        </label>
        <label>body
          <textarea 
            type="text" 
            name="body" 
            value={inputs.body || ""} 
            onChange={handleChange}
          />
          </label>

       
          </label>
          <label>cover
          <input type="file" 
    name="entryCover"
    accept="image/jpeg,image/png,image/gif"
    onChange={(e) => {handleImageChange(e)}} />
        </label>
          <input type="submit" />
      </form>
    )
}

I have tried to use fetch instead of axios like this:

 fetch('/entryForm/', {
           method: 'POST',
           body: form_data
        })

No data is submitted to the database. I have tried to change debug in settings.py to false but It hasn't worked so how can I upload the image from react to Imagefield

[HADEED-143]

class entry(models.Model):
title = models.CharField(max_length=600)
body = models.TextField()
entryCover = models.ImageField(upload_to='entrycover', blank=True, null=True)

set to this and try it if run good then share setting file here.
class entry(models.Model):
title = models.CharField(max_length=600)
body = models.TextField()
entryCover = models.FileField() #upload_to='entrycover', blank=True, null=True

[auvipy]

most probably you didn't override the post method of the viewset properly here
def post(self, serializer):
serializer.save(creator=self.request.user)