Django: Unsupported media type - reactjs

Question

I am trying to send image from react to django rest framework,this is what I tried so far,it gives Unsupported media type error, I am not sure if the problem is in the backend or frontend part. What else should I do in order to make it work?
backend
views.py
class ImageView(APIView):
permission_classes=[permissions.IsAuthenticated]
parser_classes=[MultiPartParser,FormParser]
def post(self,request,format=None):
print(request.data)
serializer=ImageSerializer(data=request.data)
if serializer.is_valid():
serializer.save();
return Response(status=200)
serializer.py
class ImageSerializer(serializers.ModelSerializer) :
class Meta:
model=Images;
fields=['image']
models.py
def upload_to(instance,filename):
return 'images/{filename}'.format(filename=filename)
class Images(models.Model):
image=models.ImageField(upload_to=upload_to)
settings.py
MEDIA_ROOT=BASE_DIR.joinpath('media')
MEDIA_URL='/media/'
frontend
Send_file.js
const Send_file=()=>{
const send_data=(e)=>{
e.preventDefault();
let data={
'image':e.target[0].files[0]
}
axios.post(`${BASE_URL}/upload_image/`,data,config)
}
return <>
<form enctype='multipart/form-data' onSubmit = {send_data}>
<input type='file'/>
<button type='submit'>SEND FILE</button>
</form>
</>
}

Answer 1

I think you need to set FileField in the ImageSerializer.
class ImageSerializer(serializers.ModelSerializer):
upload_image = serializers.FileField(max_length = 10000000, allow_empty_file = False, use_url = False, write_only = True)
class Meta:
model = Images
fields = ('upload_image', 'image')
def create(self, validated_data):
image_source = validated_data.pop('upload_image')
new_image = Images.objects.create(image = image_source)
return new_image
And please change the image key in the data object in Send_file.js into upload_image.
const Send_file=()=>{
const send_data=(e)=>{
e.preventDefault();
let data={
'upload_image':e.target[0].files[0] # here
}
axios.post(`${BASE_URL}/upload_image/`,data,config)
}
...
}