Upload images and displayed

This is the errors:

enter image description here

The cod works in postman enter image description here enter image description here but not in angular. i have these in dashboard component

uploadImage() {
this.selectedFiles.forEach(file => {
let id: string | null = localStorage.getItem("id");
let userId: number = id ? Number(id) : 0;
this.userService.uploadImage(userId, file).subscribe(
response => {
console.log('Image uploaded successfully', response);
this.loadUserImages();
},
error => {
console.error('Error uploading image', error);
console.error('Error details:', error.message);
}
);
});
}

loadUserImages() {
let id: string | null = localStorage.getItem("id");
let userId: number = id ? Number(id) : 0;
this.userService.getUserImages(userId).subscribe(
(imageDataArray: any) => {
console.log('Images loaded successfully', imageDataArray);
this.imagini = imageDataArray.map((data: any) => {
let objectURL = URL.createObjectURL(new Blob([new Uint8Array(data)], { type: 'image/jpeg' }));
return objectURL;
});
},
error => {
console.error('Error loading images', error);
console.error('Error details:', error.message);
}
);


and these in user service :

getUserImages(userId: number): Observable<any> {
const token = localStorage.getItem('token'); // presupunând că token-ul este salvat în localStorage
if (!token) {
console.error('No token found in localStorage');
throw new Error('No token found in localStorage');
}
const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
console.log(`Fetching images for user ${userId} with token ${token}`);
return this.http.get(`${BASIC_URL}/api/user/${userId}/imagini`, { headers: headers, responseType: 'json' });
}


in java for images i have 403 forbbiden

and for uploadImage i have enter image description here

I want to upload an image when I log in and have all the images corresponding to the user displayed.

Continue reading...