Estoy tratando de crear un formulario que le permita al usuario cargar un archivo csv, que luego manipularé usando JS y devolveré algunas matrices de objetos. El problema es la parte de carga.
Cuando lo hago en Vanilla JS, funciona perfectamente. Pero ahora lo estoy intentando en Angular y me sale el siguiente error:
ERROR TypeError: no se pueden leer las propiedades de undefined (leyendo '0')
Cuando hago console.log() la ruta del archivo cargado, obtengo C:\fakepath\fileName.csv. Esto no sucede cuando se usa Vanilla JS, por lo que sospecho que el problema podría estar relacionado con eso.
A continuación se muestra mi código:
home-page.component.html:
<div class="container"> <form #myForm id="myForm"> <div class="row"> <div class="col-10"> <label for="csvFile">Select CSV File</label> <input class="form-control mb-3" type="file" accept=".csv" #csvFile /> </div> <div class="col-2"> <!-- <button (click)="myClickFunction($event)" class= "btn btn-secondary mt-4" type="submit" value="Submit">Upload</button> --> <input (click)="myClickFunction($event)" class="btn btn-secondary mt-4" type="submit" value="Upload" /> </div> </div> </form> </div>home-page.comomponent.ts:
import {Component, VERSION, ViewChild, ElementRef, OnInit} from "@angular/core"; import { FormsModule, ReactiveFormsModule} from '@angular/forms'; import {FormBuilder} from '@angular/forms'; import { NgModule} from '@angular/core'; @Component({ selector: 'app-home-page', templateUrl: './home-page.component.html', styleUrls: ['./home-page.component.css'] }) export class HomePageComponent implements OnInit { constructor() {} ngOnInit(): void {} @ViewChild('csvFile') csvFile!: ElementRef; myClickFunction(event: any) { event.preventDefault() event.stopPropagation() console.log(this.csvFile.nativeElement.value); const input =this.csvFile.nativeElement.value.files[0]; const reader = new FileReader(); console.log("Form submitted " + input); } }Como mencioné, sospecho que el problema podría ser el nombre del archivo fakepath, pero no puedo estar seguro. ¡Soy muy nuevo en Angular, por lo que cualquier ayuda será muy apreciada! Gracias.
La propiedad .value del elemento es una cadena que contiene la ruta/ubicación de su archivo seleccionado (esto dice ruta falsa por razones de seguridad).
Entonces, esa propiedad (valor) no tiene un campo o propiedad llamada 'archivos' que sea una matriz, de ahí el error que está viendo.
Puede acceder a los objetos de archivo asociados a su entrada csvFile con this.csvFile.nativeElement.files[0]