Angular Front-end editing picture problem

So I am currently working on a web application that I can add user which has name last name age born date and a picture. And after I create a user I can delete and edit it. My problem is when I create a user and then after I try to edit it and replace the picture of the user and then save it, it creates a new user with the same info but with the picture I tried to change in the first place.

Here is the stackblitz link to it: https://stackblitz.com/~/github.com/simeonskiq/Angular-project

edit-user.component.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { UserService } from '../user.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

declare var bootstrap: any;

@Component({
selector: 'app-edit-user',
templateUrl: './edit-user.component.html',
styleUrls: ['./edit-user.component.css']
})
export class EditUserComponent implements OnInit {
userForm: FormGroup;
userId!: string;
notificationMessage: string = '';
private confirmModalInstance: any;
photoUrl?: string | ArrayBuffer | null = '';

constructor(
private fb: FormBuilder,
private userService: UserService,
private route: ActivatedRoute,
private router: Router
) {
this.userForm = this.fb.group({
id: [''],
firstName: ['', [Validators.required, this.noNumbers]],
lastName: ['', [Validators.required, this.noNumbers]],
occupation: ['', [Validators.required, this.noNumbers]],
gender: ['', Validators.required],
dateOfBirth: ['', Validators.required],
photo: ['']
});
}

noNumbers = (control: any): { [key: string]: boolean } | null => {
if (control.value && /\d/.test(control.value)) {
return { 'containsNumber': true };
}
return null;
}

ngOnInit(): void {
this.userId = this.route.snapshot.params['id'];
this.userService.getUser(Number(this.userId)).subscribe(user => {
if (user) {
this.userForm.patchValue(user);
this.photoUrl = user.photo;
}
});

const modalElement = document.getElementById('confirmSaveUserModal');
if (modalElement) {
this.confirmModalInstance = new bootstrap.Modal(modalElement);
}
}

showNotification(message: string): void {
this.notificationMessage = '';
setTimeout(() => {
this.notificationMessage = message;
}, 0);
}

handleSave(event: Event): void {
event.preventDefault();
if (this.userForm.invalid || this.hasErrors()) {
this.showNotification('Please ensure all fields are correctly filled and do not contain numbers.');
} else {
this.showConfirmationModal();
}
}

hasErrors(): boolean {
const controls = this.userForm.controls;
return Object.keys(controls).some(key => controls[key].hasError('containsNumber'));
}

showConfirmationModal(): void {
if (this.confirmModalInstance) {
this.confirmModalInstance.show();
}
}

confirmSaveUser(): void {
if (this.userForm.valid) {
const updatedUser = { ...this.userForm.value };
updatedUser.id = this.userId; // Explicitly assign the ID to avoid duplications

this.userService.updateUser(updatedUser).subscribe(() => {
this.confirmModalInstance.hide();
this.router.navigate(['/home']);
}, (error) => {
console.error('Error updating user:', error);
});
}
}

cancel(): void {
this.router.navigate(['/home']);
}

onFileChange(event: any): void {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = () => {
this.photoUrl = reader.result as string; // Ensure it's a string
this.userForm.patchValue({ photo: this.photoUrl });
};
reader.readAsDataURL(file);
}
}
}


user.service.ts:

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { User } from './user.model';

@Injectable({
providedIn: 'root'
})
export class UserService {
private users: User[] = [];

constructor() { }

getUsers(): Observable<User[]> {
return of(this.users);
}

getUser(id: number): Observable<User | undefined> {
const user = this.users.find(user => user.id === id.toString());
return of(user);
}

addUser(user: User): Observable<void> {
if (!user.id) {
user.id = (this.users.length + 1).toString();
}
user.createdDate = new Date();
if (user.dateOfBirth) {
user.age = this.calculateAge(user.dateOfBirth);
}
this.users.push({ ...user });
return of();
}

updateUser(updatedUser: User): Observable<void> {
const index = this.users.findIndex(user => user.id === updatedUser.id);
if (index !== -1) {
updatedUser.age = this.calculateAge(updatedUser.dateOfBirth);
this.users[index] = updatedUser;
}
return of();
}

updateUserPhoto(id: string, photoUrl: string | ArrayBuffer | null): Observable<void> {
const index = this.users.findIndex(user => user.id === id);
if (index !== -1 && photoUrl) {
if (typeof photoUrl !== 'string') {
// Convert ArrayBuffer to base64 string
photoUrl = this.arrayBufferToBase64(photoUrl);
}
this.users[index].photo = photoUrl;
}
return of();
}

deleteUser(id: number): Observable<void> {
this.users = this.users.filter(user => user.id !== id.toString());
return of();
}

private calculateAge(dateOfBirth: string): number {
const dob = new Date(dateOfBirth);
const ageDifMs = Date.now() - dob.getTime();
const ageDate = new Date(ageDifMs);
return Math.abs(ageDate.getUTCFullYear() - 1970);
}

private arrayBufferToBase64(buffer: ArrayBuffer): string {
let binary = '';
const bytes = new Uint8Array(buffer);
const len = bytes.byteLength;
for (let i = 0; i < len; i++) {
binary += String.fromCharCode(bytes);
}
return window.btoa(binary);
}
}


I tried everything and it isn't working. I want when I edit it and place a new picture and save it the picture to change and not a new user to add.

Continue reading...