Tengo que enviar una imágen en un formulario junto con más datos, este es el código:
El formulario reactivo:
this.editForm = this.formBuilder.group({
dni: ['', [
Validators.required,
Validators.pattern('^(([A-Z]\\d{8})|(\\d{8}[A-Z]))$')
]],
name: ['', [
Validators.required,
Validators.maxLength(64)
]],
surname: ['', [
Validators.required,
Validators.maxLength(64)
]],
email: ['', [
Validators.required,
CustomValidators.email,
Validators.maxLength(64)
]],
city: ['', [
Validators.required,
Validators.maxLength(32)
]],
phone: ['', [
Validators.required,
Validators.pattern('^[0-9]*$'),
Validators.maxLength(9),
Validators.minLength(9)
]],
postal_code: ['', [
Validators.required,
Validators.pattern('^(?:0[1-9]|[1-4]\\d|5[0-2])\\d{3}$')
]],
avatar: null
});
La función que añade la imagen al formulario:
onFileChange(event) {
if(event.target.files.length > 0) {
const file = event.target.files[0];
this.editForm.get('avatar').setValue(file);
}
}
Y se lo envío a mi servicio de esta manera:
if (response.value) {
return this.authService.editProfileUserAuth(this.editForm.value, this.user.id).subscribe(
(response) => {
this.toastr.success(response['message'], 'Enhorabuena');
this.getProfileUserAuth();
},
(error) => {
this.toastr.error(error, 'Error');
}
);
}
Bien, cuando llega a mi servicio obtengo esto en un consolelog:
dni: "9858579X" name: "Test"surname: "Test"email: "Test"city: "Test"phone: "999999999"postal_code: "000000"avatar: File {name: "default-avatar.png", lastModified: 1581014601466, lastModifiedDate: Thu Feb 06 2020 19:43:21 GMT+0100 (hora estándar de Europa central), webkitRelativePath: "", size: 48598, …}
Así podría trabarlo correctamente pero cuando lo envío a mi api de esta manera:
editProfileUserAuth(userForm, id) {
console.log(userForm);
return this.http.put(
`${routes.API_ENDPOINT_USER}/${id}`,
userForm,
).pipe(map(data => data));
}
Esto es lo que envia en las cabeceras:
dni: "9858579X"
name: "Test"
surname: "Test"
email: "Test"
city: "Test"
phone: "999999999"
postal_code: "00000"
avatar: {}
No sé por qué viene el objeto avatar vacío ¿alguna sugerencia?