how to submit image and text field in single API endpoint using drf and angular

Question

Good day guy i'm working on an drf api endpoint that requires user uploading image and text to the same endpoint, i've done all that is required but i still keep getting error, below is snippet of my code and error msg

APIVIEW

class CreateProfileView(APIView):
  parser_classes = (MultiPartParser,)
  serializer_class = schoolProfileSerializer
  queryset = schoolProfile.objects.all()
  permission_classes = [permissions.AllowAny]

  def perform_create(self, serializer):
    serializer.save(user=self.request.user)

  def post(self, request):

    file_upload = schoolProfileSerializer(data =request.data, instance=request.user)
    if file_upload.is_valid():
      file_upload.save()
      return Response(file_upload.data, status=status.HTTP_201_CREATED)
    else:
      return Response(file_upload.errors, status=status.HTTP_400_BAD_REQUEST )

SERIALIZER

class Base64Imagefield(serializers.ImageField):

  def to_internal_value(self, data):
    if isinstance(self, six.string_types):
      if 'data: ' in data and ';base64, ' in data:
        header, data = data.split(';base64,')
      try:
        decode_file = base64.b64decode(data)
      except TypeError:
        self.fail('invalide image')

      file_name = str(uuid.uuid4())[:16]
      file_extension = self.get_file_extension(file_name, decode_file)
      complete_file_name = "%s.%s" %(file_name, file_extension)
      data = ContentFile(decode_file, name=complete_file_name)

    return super(Base64Imagefield, self).to_internal_value(data)  

  def get_file_extension(self, file_name, decode_file):
    extension = imghdr.what(file_name, decode_file)
    extension = 'jpg' if extension == 'jpeg' else extension
    return extension

class schoolProfileSerializer(serializers.ModelSerializer):
  parser_classes = (MultiPartParser, FormParser, )
  id = serializers.IntegerField(source='pk', read_only=True)
  email = serializers.CharField(source='user.email', read_only=True)
  username = serializers.CharField(source='user.username', read_only=True)
  badge = Base64Imagefield(max_length=None, use_url=True)

  class Meta:
    model = schoolProfile
    fields = ( 'email', 'id', 'username', 'school_name',
          'address', 'badge', 'gender', 'level',
        )

  def create(self, validated_data, instance=None):
    if 'user' in validated_data:
      user = validated_data.pop('user')
    else:
      user = CustomUser.objects.create(**validated_data)
    profile, created_profile = schoolProfile.objects.update_or_create(user=user,   
      **validated_data)
    return profile

Angular service

postSchoolProfile(profile: schoolProfile):Observable<schoolProfile>{
  const url= `${environment.mainUrl}/school-profile/create`
  return this.httpClient.post<schoolProfile>(url, {profile})
}

Error msg

detail  "Unsupported media type \"application/json\" in request.

can anyone help out pls ?