Estoy haciendo un proyecto con Angular y Springboot donde... Estoy implementando la carga de los pacientes con imagen en el formulario. El problema que me esta surgiendo es el siguiente:
ERROR:
POST http://localhost:8080/api/v1/paciente/crearPaciente 400 (Bad Request)
DESCRIPCION DEL ERROR:
HttpErrorResponse {headers: HttpHeaders, status: 400, statusText: 'OK', url: 'http://localhost:8080/api/v1/paciente/crearPaciente', ok: false, …} error : {timestamp: 1708545115937, status: 400, error: 'Bad Request', trace: 'org.springframework.web.method.annotation.MethodAr…onverter(ConversionUtils.java:41)\r\n\t... 95 more\r\n', message:
Failed to convert value of type 'java.lang.String'…":"","dni":0,"tipo_sangre":"","ti (truncated)...]
, …} headers : HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ} message : "Http failure response for http://localhost:8080/api/v1/paciente/crearPaciente: 400 OK" name : "HttpErrorResponse" ok : false status : 400 statusText : "OK" url : "http://localhost:8080/api/v1/paciente/crearPaciente" [[Prototype]] : HttpResponseBase
BACKEND:
En mi application properties:
file.upload-dir=C:\Users\Lautaro\Desktop\Proyectos\proyecto-clinica-odontologica\imagen
Imagen service:
@Service
@Transactional
public class ImagenServiceImpl implements ImagenService {
@Value("${file.upload-dir}")
private String uploadDir;
@Override
public void guardarImagen(Integer id, MultipartFile file, String imageName) throws IOException {
Path entityDir = Paths.get(uploadDir, "user_" + id);
Path filePath = entityDir.resolve(imageName);
Files.createDirectories(entityDir); // Asegurar que el directorio exista
file.transferTo(filePath); // Guardar el archivo en el directorio
}
@Override
public byte[] cargarImagen(Integer id, String imagen) throws IOException {
Path imagePath = Paths.get(uploadDir, "user_" + id, imagen);
return Files.readAllBytes(imagePath);
}
}
En mi paciente service:
@Override
public Paciente guardarImagen(Integer id, MultipartFile file) {
Paciente paciente = repository.findById(id).orElse(null);
if (paciente != null) {
try {
if (file != null && !file.isEmpty()) {
String imageName = "imagen_paciente_" + paciente.getId() + "_" + file.getOriginalFilename();
imagenService.guardarImagen(paciente.getId(), file,imageName);
paciente.setImgUrl(imageName); // Almacenar la ruta de la imagen en el campo imgUrl
return repository.save(paciente);
}
} catch (IOException e) {
// Manejar la excepción de manera adecuada (puedes lanzarla o loguearla según tus necesidades)
e.printStackTrace();
}
}
return null; // Puedes manejar este caso de acuerdo a tus necesidades (puedes lanzar una excepción, loguear, etc.)
}
Donde despues utilizo el guardar imagen en el siguiente servicio , guardar paciente:
@Override
public Paciente crearPacienteConHistorial(Paciente paciente, MultipartFile file) {
User user = userService.findByEmail(paciente.getEmail()).orElse(null);
if(user != null){
paciente.setUser(user);
}
// Crear y guardar el historial médico
HistorialMedico historialMedico = new HistorialMedico();
// Configurar propiedades específicas del historial médico
historialMedico.setPaciente(paciente); // Establecer la relación inversa al paciente
// Guardar el historial médico en la base de datos
historialMedicoService.saveHistorial(historialMedico);
// Configurar otras propiedades del paciente según los datos en pacienteRequest
paciente.setHistorialMedico(historialMedico);
//Guardamos la imagen del paciente
guardarImagen(paciente.getId(),file);
// Guardar el paciente en la base de datos
return repository.save(paciente);
}
En mi contoller:
@PostMapping("/crearPaciente")
public ResponseEntity<Paciente> crearPaciente(
@RequestParam Paciente pacienteRequest,
@RequestParam("file") MultipartFile file) {
try {
Paciente paciente = service.crearPacienteConHistorial(pacienteRequest, file);
return new ResponseEntity<>(paciente, HttpStatus.CREATED);
} catch (Exception e) {
return new ResponseEntity<>(null, HttpStatus.INTERNAL_SERVER_ERROR);
}
}
FRONTEND:
Servicio para guardar el paciente:
crearPacienteConHistorial(paciente: Paciente, file: File): Observable<Paciente> {
const formData: FormData = new FormData();
formData.append('file', file, file.name);
formData.append('pacienteRequest', JSON.stringify(paciente));
const headers = new HttpHeaders();
return this.http.post<Paciente>(`${this.apiUrl}/crearPaciente`, formData, { headers: headers });
}
HTML:
<div class="container mt-4">
<h2>Alta de Paciente</h2>
<form (ngSubmit)= "crearPaciente()" #altaPacienteForm="ngForm">
<div class="form-group">
<label for="nombre">Nombre</label>
<input type="text" class="form-control" id="nombre" name="nombre" [(ngModel)]= "nuevoPaciente.nombre" required>
</div>
<div class="form-group">
<label for="apellido">Apellido</label>
<input type="text" class="form-control" id="apellido" name="apellido" [(ngModel)]= "nuevoPaciente.apellido" required>
</div>
<div class="form-group">
<label for="fechaNacimiento">Fecha de Nacimiento</label>
<input type="date" class="form-control" id="fechaNacimiento" name="fechaNacimiento" [(ngModel)]= "nuevoPaciente.fechaNacimiento" required>
</div>
<div class="form-group">
<label for="telefono">Teléfono</label>
<input type="tel" class="form-control" id="telefono" name="telefono" [(ngModel)]= "nuevoPaciente.telefono" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" [(ngModel)]= "nuevoPaciente.email" required>
</div>
<div class="form-group">
<label for="dni">DNI</label>
<input type="number" class="form-control" id="dni" name="dni" [(ngModel)]= "nuevoPaciente.dni" required>
</div>
<div class="form-group">
<label for="direccion">Dirección</label>
<input type="text" class="form-control" id="direccion" name="direccion" [(ngModel)]= "nuevoPaciente.direccion" required>
</div>
<div class="form-group">
<label for="tipoSangre">Tipo de Sangre</label>
<select class="form-select" id="tipoSangre" name = "tipoSangre" [(ngModel)]= "nuevoPaciente.tipo_sangre">
<option value="" selected></option>
<option *ngFor="let tipo of tipoSangreOptions" [value]= "tipo">{{ tipo }}</option>
</select>
</div>
<div class="form-group">
<label for="tiene_OS">¿Tiene Obra Social?</label>
<input type="checkbox" class="form-check-input" id="tiene_OS" name="tiene_OS" [(ngModel)]= "nuevoPaciente.tiene_OS">
</div>
<div class="form-group" *ngIf= "nuevoPaciente.tiene_OS">
<label for="obraSocial">Obra Social</label>
<input type="text" class="form-control" id="obraSocial" name="obraSocial" [(ngModel)]= "nuevoPaciente.obraSocial" required>
</div>
<div class="form-group">
<label for="imagen">Seleccionar Imagen:</label>
<input type="file" class="form-control" id="imagen" name="imagen" [(ngModel)]= "nuevoPaciente.img" (change)="onFileSelected($event)" accept="image/*">
</div>
<button type="submit" class="btn btn-primary">Guardar Paciente</button>
</form>
</div>
TS:
import { Component, OnInit } from '@angular/core';
import { PacienteService } from '../paciente.service';
import { ToastrService } from 'ngx-toastr';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-alta-pacientes',
templateUrl: './alta-pacientes.component.html',
styleUrls: ['./alta-pacientes.component.scss']
})
export class AltaPacientesComponent implements OnInit {
nuevoPaciente: any = {};
selectedImage!: File;
tipoSangreOptions: string[] = ['A+', 'O+', 'B+', 'AB+', 'A-', 'O-', 'B-', 'AB-'];
nuevoPacienteForm!: FormGroup; // Agregamos un FormGroup para manejar el formulario
constructor(
private service: PacienteService,
private toastr: ToastrService,
private router: Router,
private fb: FormBuilder, // Inyectamos FormBuilder
) {
}
ngOnInit(): void {
// Inicializamos el FormGroup con validadores si es necesario
this.nuevoPacienteForm = this.fb.group({
nombre: ['', Validators.required],
apellido: ['', Validators.required],
telefono: ['', Validators.required],
direccion: ['', Validators.required],
obraSocial: ['', Validators.required],
dni: [0, Validators.required],
tipo_sangre: ['', Validators.required],
tiene_OS: [false, Validators.required],
fechaNacimiento: [new Date(0, 0, 0), Validators.required],
email: ['', Validators.required],
// Otros campos del formulario...
img: [''],
});
}
onFileSelected(event: any): void {
this.selectedImage = event.target.files[0] as File;
}
crearPaciente(): void {
// Usamos this.nuevoPacienteForm.value en lugar de this.nuevoPaciente
this.service.crearPacienteConHistorial(this.nuevoPacienteForm.value, this.selectedImage).subscribe(response => {
console.log("Guardado con éxito", response);
this.mostrarNotificacion();
this.volverPacientes();
});
}
mostrarNotificacion() {
this.toastr.success('Paciente guardado con éxito', 'Éxito');
}
volverPacientes() {
this.router.navigate(['/component/pacientes']);
}
}