4

Estoy intentando cargar el archivo al valor de mi formulario de esta forma:

const file: File = $event.target.files[0];
this.formulario.controls['urlimg'].setValue(file);

Pero recibo este error:

Error: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

No veo algún problema al intentar insertar el archivo, por lo que veo el error me lo da esta línea de código:

this.formulario.controls['urlimg'].setValue(file);

Aquí esta el código de ejemplo.

Les agradezco su ayuda de antemano.

1
  • 1
    ya intentaste con fileInput.files = $event.target.files;? el 20 dic. 2022 a las 5:07

1 respuesta 1

4

Se habla de este problema en éste enlace de github el cual cito a continuación:

Tuve este problema con angular 4, y la solución fue muy fácil si usa este código: <input type="file" [(ngModel)]="Attachment" (change)="upload2()" placeholder="Upload file..." /> causa un problema debido al enlace bidireccional en este [(ngModel)]="Attachment", es un problema de seguridad cuando cambia el valor del archivo de entrada sin usar el navegador o usar el código detrás

por lo que debe usar este iplace <input type="file" (change)="upload2()" placeholder="Upload file..." /> y luego actualizar su modelo dentro de la función upload2()

Como se menciona en la cita, "es un problema de seguridad cuando cambia el valor del archivo de entrada sin usar el navegador o usar el código detrás" en tu caso el problema se encuentra cuando utilizas formControlName="urlimg" en tu HTML y posteriormente lo seteas en el typescript, ahora bien lo que debes hacer es simplemente quitar esta porción de código y hacer unas ligeras modificaciones en tu typescript como se ve a continuación:

MostrarImg($event: any): void {
  if ($event.target.files.length > 0) {
    if ($event.target.files[0].size > 2097152) {
      // ! Pesa mas de 2 mg
      this.formulario.controls['urlimg'].setValue('');
    } else {
      const file: File = $event.target.files[0];

      const imgCon: any = document.querySelector('.imgCon');
      const url = URL.createObjectURL(file);
      imgCon.src = url;
      this.formulario.get('urlimg').setValue(file);

      console.log(this.formulario.value);
    }
  }
}

La verdad yo lo haría un poco diferente, pero quisiera respetar lo que tienes avanzado, por eso es que no modifiqué demasiado tu código que veo que es funcional ;).

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.