I am trying to update a users profile but keep getting 400 bad request. When I try on postman it works fine.

My frontend (React Native):

const [new_header_pic, setHeaderPic] = useState(route.params?.profile_data[0].header_pic);
const [new_avi_pic, setAviPic] = useState(route.params?.profile_data[0].avi_pic);
const [new_email, setEmail] = useState(route.params?.profile_data[0].email);
const [new_first_name, setFirstName] = useState(route.params?.profile_data[0].first_name);
const [new_last_name, setLastName] = useState(route.params?.profile_data[0].last_name);
const [new_username, setUsername] = useState(route.params?.profile_data[0].username);
const [new_location, setLocation] = useState(route.params?.profile_data[0].location);
const [new_bio, setBio] = useState(route.params?.profile_data[0].bio);
const [new_url, setLink] = useState(route.params?.profile_data[0].url);

// Data
const data = {
  header_pic: JSON.stringify(new_header_pic),
  avi_pic: JSON.stringify(new_avi_pic),
  email: JSON.stringify(new_email),
  first_name: JSON.stringify(new_first_name),
  last_name: JSON.stringify(new_last_name),
  username: JSON.stringify(new_username),
  location: JSON.stringify(new_location),
  bio: JSON.stringify(new_bio),
  url: JSON.stringify(new_url)
};

My api call:

//Update Profile
const updateProfile = async () => {
  console.log(JSON.stringify(data))
  try {
    await axios.put(url, JSON.stringify(data), {
      'headers': {
         'Content-Type': 'multipart/form-data',
         'Authorization': 'token'
      }
    }).then(res => {
      console.log(res.data)
      {res.data === 200} {
        navigation.navigate('MyProfile')
      }
    });
  } catch (e) {
    console.log(e)
  };
}

If i change the content type to application/json I get 415 Unsupported Media Type

My backend view (django):

class UserViewSet(viewsets.ModelViewSet):
    serializer_class = UserSerializer
    parser_classes = [MultiPartParser, FormParser]
    queryset = User.objects.all()

    def put(self, request):
        user_id = self.request.user
        header_pic = request.data.get('header_pic')
        avi_pic = request.data.get('avi_pic')
        email = request.data.get('email')
        first_name = request.data.get('first_name')
        last_name = request.data.get('last_name')
        username = request.data.get('username')
        location = request.data.get('location')
        bio = request.data.get('bio')
        url = request.data.get('url')

        user = User.objects.update(
            user_id, header_pic, avi_pic, email, first_name,
            last_name, username, location, bio, url
        )

        user.save()

        serializer = UserSerializer(user)

        return Response(serializer.data, status=status.HTTP_200_OK)

Appreciate any help!

CodePudding user response：

I think the payload you use is the string but you need to use it as object.

// Update Profile
const updateProfile = async () => {
  console.log(JSON.stringify(data))
  try {
    await axios.put(url, data, {  # you don't need to stringify it
      'headers': {
         'Content-Type': 'application/json', # use application/json
         'Authorization': 'token'
      }
    }).then(res => {
      ...
    });
  } catch (e) {
    console.log(e)
  };
}

And remove the parser_class attribute in the UserViewSet class.