Fix error when not upload image / Use username instead of first name in profile

backend/users/serializers.py

@@ -32,12 +32,32 @@ class UpdateProfileSerializer(serializers.ModelSerializer):
     Serializer for updating user profile.
     """
     profile_pic = serializers.ImageField(required=False)
-    first_name = serializers.CharField(max_length=255, required=False)
+    username = serializers.CharField(max_length=255, required=False)
     about = serializers.CharField(required=False)
 
     class Meta:
         model = CustomUser
-        fields = ('profile_pic', 'first_name', 'about')
+        fields = ('profile_pic', 'username', 'about')
+
+    def update(self, instance, validated_data):
+        """
+        Update an existing user's profile.
+        """
+        for attr, value in validated_data.items():
+            setattr(instance, attr, value)
+        instance.save()
+        return instance
+    
+class UpdateProfileNopicSerializer(serializers.ModelSerializer):
+    """
+    Serializer for updating user profile.
+    """
+    username = serializers.CharField(max_length=255, required=False)
+    about = serializers.CharField(required=False)
+
+    class Meta:
+        model = CustomUser
+        fields = ('username', 'about')
 
     def update(self, instance, validated_data):
         """

backend/users/views.py

@@ -9,7 +9,7 @@ from rest_framework.parsers import MultiPartParser
 
 from rest_framework_simplejwt.tokens import RefreshToken
 
-from users.serializers import CustomUserSerializer, UpdateProfileSerializer
+from users.serializers import CustomUserSerializer, UpdateProfileSerializer, UpdateProfileNopicSerializer
 from users.models import CustomUser
 
 class CustomUserCreate(APIView):
@@ -57,7 +57,11 @@ class CustomUserProfileUpdate(APIView):
             return Response ({
                 'error': 'User does not exist'
             }, status=status.HTTP_404_NOT_FOUND)
+        
         serializer = UpdateProfileSerializer(request.user, data=request.data)
+        if request.data.get('profile_pic') == "null":
+            serializer = UpdateProfileNopicSerializer(request.user, data=request.data)
+
         if serializer.is_valid():
             serializer.save()
             return Response(serializer.data)

frontend/src/components/profile/ProfileUpdateComponent.jsx

@@ -5,7 +5,7 @@ import { useEffect } from "react";
 
 export function ProfileUpdateComponent() {
   const [file, setFile] = useState(null);
-  const [firstName, setFirstName] = useState("");
+  const [username, setUserName] = useState("");
   const [about, setAbout] = useState();
   const fileInputRef = useRef(null);
   const [profile_pic, setProfilePic] = useState(undefined);
@@ -14,11 +14,11 @@ export function ProfileUpdateComponent() {
       try {
         const response = await axiosInstance.get("/user/data/");
         const fetchedProfilePic = response.data.profile_pic;
-        const fetchedName = response.data.first_name;
+        const fetchedName = response.data.username;
         const fetchedAbout = response.data.about;
         setProfilePic(fetchedProfilePic);
         setAbout(fetchedAbout);
-        setFirstName(fetchedName);
+        setUserName(fetchedName);
       } catch (error) {
         console.error("Error fetching user:", error);
       }
@@ -42,7 +42,7 @@ export function ProfileUpdateComponent() {
   const handleSave = () => {
     const formData = new FormData();
     formData.append("profile_pic", file);
-    formData.append("first_name", firstName);
+    formData.append("username", username);
     formData.append("about", about);
 
     ApiUpdateUserProfile(formData);
@@ -62,16 +62,9 @@ export function ProfileUpdateComponent() {
             ref={fileInputRef}
           />
         </label>
-        <div
+        <div className="avatar w-32 h-32 cursor-pointer hover:blur" onClick={handleImageUpload}>
-          className="avatar w-32 h-32 cursor-pointer hover:blur"
-          onClick={handleImageUpload}
-        >
           {file ? (
-            <img
+            <img src={URL.createObjectURL(file)} alt="Profile" className="rounded-full" />
-              src={URL.createObjectURL(file)}
-              alt="Profile"
-              className="rounded-full"
-            />
           ) : (
             <>
               <img src={profile_pic} alt="Default" className="rounded-full" />
@@ -96,13 +89,13 @@ export function ProfileUpdateComponent() {
 
       {/* Full Name Field */}
       <div className="w-96">
-        <label className="block mb-2 text-gray-600">First Name</label>
+        <label className="block mb-2 text-gray-600">username</label>
         <input
           type="text"
-          placeholder="Enter your first name"
+          placeholder="Enter your username"
           className="input w-full"
-          value={firstName}
+          value={username}
-          onChange={(e) => setFirstName(e.target.value)}
+          onChange={(e) => setUserName(e.target.value)}
         />
       </div>