React and Django simple jwt profile update not null error

my problem I created a user profile model that is one to one relationship to django custom user model to update the profile from react. when i click update button in my ui, it says update user profile failed. I tried changing the model to null=True and I make makemigrations and migrate for many times but it doesn't work. Thank you for your answer in advanced! My error

return Database.Cursor.execute(self, query, params)
django.db.utils.IntegrityError: NOT NULL constraint failed: profiles_userprofile.user_id
[09/Dec/2021 16:00:49] "PUT /profile-api/update-profile/ HTTP/1.1" 500 198827

User profile model

from django.db import models
from django.conf import settings




class UserProfile(models.Model):
    user = models.OneToOneField(
        settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
    phone = models.CharField(max_length=30, default='')
    address = models.CharField(max_length=300, default='')
    profile_image = models.ImageField(upload_to="profile_images", default='')

User profile serializer

from rest_framework import serializers
from .models import UserProfile

class UserProfileSerializer(serializers.ModelSerializer):
    class Meta:
        model = UserProfile
        fields = ('phone', 'contact', 'profile_image',)

User profile view

class UserProfileView(APIView):
parser_classes = (MultiPartParser, FormParser)
permission_classes = (permissions.IsAuthenticated,)

def put(self, request, format=None):
    user = self.request.user
    email = user.email

    data = self.request.data
    phone = data['phone']
    address = data['address']
    profile_image = data['profile_image']

    UserProfile.objects.filter(user=user).update_or_create(
        phone=phone, address=address, profile_image=profile_image)

    user_profile = UserProfile.objects.get(user=user)
    user_profile = UserProfileSerializer(user_profile)

    return Response({'profile': user_profile.data, "email": str(email)}, 
status=status.HTTP_200_OK)

Update profile react actions

export const update_profile =
(phone, address, profile_image) => async (dispatch) => {
  const config = {
    headers: {
      "Content-Type": "multipart/form-data",
      Authorization: `JWT ${localStorage.getItem("access")}`,
    },
  };
  let form_data = new FormData();
  form_data.append("phone", phone);
  form_data.append("address", address);
  form_data.append("profile_image", profile_image, profile_image.name);

  try {
    const res = await axios.put(
      `${process.env.REACT_APP_API_URL}/profile-api/update-profile/`,
      form_data,
      config
    );
    if (res.data.profile) {
      dispatch({
        type: PROFILE_UPDATE_SUCCESS,
        payload: res.data,
      });
      dispatch(load_user());
    } else {
      dispatch({
        type: PROFILE_UPDATE_FAIL,
      });
    }
  } catch {
    dispatch({
      type: PROFILE_UPDATE_FAIL,
    });
  }
};

update profile reducers

export default function (state = initialState, action) {
const { type, payload } = action;
switch (type) {
  case PROFILE_UPDATE_SUCCESS:
    return {
      ...state,
      email: payload.email,
      phone: payload.phone,
      address: payload.address,
      profile_image: payload.profile_image.name,
    };
  case PROFILE_UPDATE_FAIL:
    return {
      ...state,
      email: "",
      phone: "",
      address: "",
      profile_image: "",
    };
  default:
    return {
      ...state,
    };
}

}

Update profile react call

const [phone, setPhone] = useState("");
const [address, setAddress] = useState("");
const [profileImage, setProfileImage] = useState();
const imageChangeHandler = (e) => {
  setProfileImage(e.target.files[0]);
};
const handleSubmit = (e) => {
  e.preventDefault();
  update_profile(phone, address, profileImage);
};

Back to Top