Whenever I change a user’s profile picture, it reverts to the default user picture after refreshing the page. This happens every time, making it seem like the new profile picture isn’t being saved properly. It could be due to the new image URL not being stored correctly in the database or the application not retrieving the updated URL when the page reloads. To fix this, I need to ensure that the new profile picture URL is correctly saved and fetched from the database every time the page loads.

html :

<img [src]="profileImageUrl || 'assets/images/user.png'" alt="Profile" class="rounded-circle" style="size: 130%;" (click)="triggerFileInput()">

ts :

  constructor(private authService: AuthService) {}

  profileImageUrl: string | null = null;
  private storage = getStorage();

  private readonly DEFAULT_PROFILE_IMAGE_URL = 'assets/images/user.png';
  
  
  triggerFileInput() {
    this.fileInput.nativeElement.click();
  }

  onFileSelected(event: Event) {
    const input = event.target as HTMLInputElement;
    if (input.files && input.files[0]) {
      const file = input.files[0];
      
      const reader = new FileReader();
      reader.onload = (e: any) => {
        this.profileImageUrl = e.target.result; 
        this.uploadProfileImage(file);
      };
      reader.readAsDataURL(file);
    }
  }
  
  uploadProfileImage(file: File) {
    const userId = this.authService.getUserId();
    if (userId) {
      const storageRef = ref(this.storage, `profileImages/${userId}/${file.name}`);
      const uploadTask = uploadBytesResumable(storageRef, file);     
      uploadTask.on(
        'state_changed',
        (snapshot) => {
          
        },
        () => {
          getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
            this.profileImageUrl = downloadURL;
            this.authService.updateProfileImageUrl(downloadURL);
            this.saveProfileImage(downloadURL);  
          });
        }
      );
    } 
  }      


  ngOnInit() {
    const userId = this.authService.getUserId();
    if (userId) {
      this.loadProfileImage(userId);
    } 
  }
  

  loadProfileImage(userId: string | null) {
    if (userId) {
      const storageRef = ref(this.storage, `profileImages/${userId}/profile.jpg`);
      getDownloadURL(storageRef)
        .then(url => {
          this.profileImageUrl = url;
        })
        .catch(error => {
          this.profileImageUrl = this.DEFAULT_PROFILE_IMAGE_URL;
        });
    } else {
      this.profileImageUrl = this.DEFAULT_PROFILE_IMAGE_URL;
    }
  }
  



  saveProfileImage(imageUrl: string) {
    const userId = this.authService.getUserId(); 
    if (userId) {
      const key = `profileImageUrl_${userId}`;
      localStorage.setItem(key, imageUrl);
    }
  }
    }

authservice.ts :

updateProfileImageUrl(imageUrl: string): Promise<void> {
  const auth = getAuth();
  const user = auth.currentUser;
  if (user) {
    return updateProfile(user, { photoURL: imageUrl })
  } else {
    return Promise.reject('No user is currently logged in.');
  }
}


getUserId(): string | null {
  const user = this.firebaseAuth.currentUser;
  return user ? user.uid : null;
}