0

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?

2 respuestas 2

0

Si ejecuta en un console.log el valor de tu FormControl

console.log(this.editForm.get('avatar').value);

Podrás observar que solo te trae el nombre, la forma que veo como lo puedes hacer es transformar la imagen a base64 y trabajar con la imagen de esa forma, puedo sugerirte hacerlo de la siguiente manera:

import { Component, OnInit } from '@angular/core';
import { Validators, FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-img-fomrs-reactive',
  templateUrl: './img-fomrs-reactive.component.html',
  styleUrls: ['./img-fomrs-reactive.component.css']
})
export class ImgFomrsReactiveComponent implements OnInit {

  editForm: FormGroup;
  formBuilder: FormBuilder = new FormBuilder();

  constructor() { }

  ngOnInit() {
    this.initForm();
   }

  private initForm() {
    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)
      ]],
      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
    });

    this.editForm.get('avatar').valueChanges.subscribe((value) => {
      if (value !== null && value !== '') {
        this.imgToBase64((document.querySelector('input[type="file"]') as HTMLInputElement).files[0]);
      }
    });
  }

  private imgToBase64(file: any) {
    if (file) {
      const reader = new FileReader();
      reader.onload = this.toBase64.bind(this);
      reader.readAsBinaryString(file);
    }
  }

  toBase64(e) {
    console.log('data:image/png;base64,' + btoa(e.target.result));
  }
}

En el metodo toBase64(e) ya queda la img transformada a base64.

0

tienes que enviar tipo de 'formData', porque lo que estás enviando es 'application/json'.

const formData = new FormData();
// Haces lo mismo con append de todos tus variables que quieres enviar
formData.append('avatar', this.editForm.get('avatar').value);

return this.authService.editProfileUserAuth(formData, this.user.id).subscribe(
                    (response) => {
                        this.toastr.success(response['message'], 'Enhorabuena');
                        this.getProfileUserAuth();
                    },
                    (error) => {
                        this.toastr.error(error, 'Error');
                    }
                );

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.