Troubleshooting in TypeScript: Difficulty iterating line by line through an uploaded file on Angular 9 platform

Question

Troubleshooting in TypeScript: Difficulty iterating line by line through an uploaded file on Angular 9 platform

I need to loop through a user uploaded file line by line within my Angular application. I attempted the method mentioned in this solution but encountered the following issue:

core.js:6260 ERROR TypeError: this.firstfile.split is not a function or its return value is not iterable at AppComponent.firstfileupload (app.component.ts:23) at AppComponent_Template_input_change_2_listener (app.component.html:2) at executeListenerWithErrorHandling (core.js:21815) at wrapListenerIn_markDirtyAndPreventDefault (core.js:21857) at HTMLInputElement. (platform-browser.js:976) at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Object.onInvokeTask (core.js:41640) at ZoneDelegate.invokeTask (zone-evergreen.js:398) at Zone.runTask (zone-evergreen.js:167) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480)

Here's the snippet from app.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  firstfile=null;
  second_file = null;
  title = 'first';

  constructor(private http:HttpClient){

  }

  firstfileupload(event){
    console.log("First file")
    console.log(event)
    this.firstfile=event.target.files[0]
    for(const line of this.firstfile.split(/[\r\n]+/)){
      console.log(line)
    }
    console.log("First file File has been changed")
  }
  secondfile(event){
    this.second_file=event.target.files[0];
    // for(const line of this.second_file.split(/[\r\n]+/)){
    //   console.log(line)
    // }
    console.log("Second file uploaded")
  }
  onUpload(){
    console.log("Upload button clicked")
    // const fd = new FormData();
    // fd.append('files',this.firstfile);
    // fd.append('files',this.second_file);
    // this.http.post('http://localhost:5000',fd).subscribe(res =>{
    //   console.log(res)
    // }

    // )
  }
}

As well as app.component.html

<h1>Upload the files</h1>
<input type="file" (change)="firstfileupload($event)">
<input type="file" (change)="secondfile($event)">
<button type="button" (click)="onUpload()">Upload</button>

Is there a way to iterate over an uploaded file without saving it? Any help would be greatly appreciated.

javascript angular typescript angular9

Answer 1

Answer №1

If you're looking to access the contents of a file, consider utilizing the FileReader.readAsText() method. Below is an example:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable, Subject } from 'rxjs';

export class AppComponent {
  ...

  firstfileupload(event) {
    this.firstfile = event.currentTarget.files[0];

    this.readFileContent(event.currentTarget.files[0]).subscribe(
      content => {
        for(const line of content.split(/[\r\n]+/)) {
          if (line !== '') {         
            console.log(line);
          }
        }
      }
    );

    console.log("First file File has been changed")
  }

  private readFileContent(file): Observable<any> {
    let result = new Subject<any>();           

    const reader = new FileReader();           
    reader.onload = (e) => {                   
      const fileContent = e.target.result;     
      result.next(fileContent);                
    };
    reader.readAsText(file);                   

    return result.asObservable();              
  }
}

The FileReader belongs to the File API, offering various events based on different actions.

load event. This facilitates the reading of file content asynchronously via the function readFileContent.

For further insights into asynchronous data processing, check out:

Answer 2

If you're looking to access the contents of a file, consider utilizing the FileReader.readAsText() method. Below is an example:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable, Subject } from 'rxjs';

export class AppComponent {
  ...

  firstfileupload(event) {
    this.firstfile = event.currentTarget.files[0];

    this.readFileContent(event.currentTarget.files[0]).subscribe(
      content => {
        for(const line of content.split(/[\r\n]+/)) {
          if (line !== '') {         
            console.log(line);
          }
        }
      }
    );

    console.log("First file File has been changed")
  }

  private readFileContent(file): Observable<any> {
    let result = new Subject<any>();           

    const reader = new FileReader();           
    reader.onload = (e) => {                   
      const fileContent = e.target.result;     
      result.next(fileContent);                
    };
    reader.readAsText(file);                   

    return result.asObservable();              
  }
}

The FileReader belongs to the File API, offering various events based on different actions.

load event. This facilitates the reading of file content asynchronously via the function readFileContent.

For further insights into asynchronous data processing, check out:

Answer 3

Answer №2

The issue you are facing, as indicated by the error message

this.firstfile.split is not a function or its return value is not iterable

, is that you are attempting to loop through an object (in this case, the file itself) rather than its actual contents.

firstfileupload(event){
    . . .
    this.firstfile=event.target.files[0]  // <<<----- Here, you are storing the file as an OBJECT
    for(const line of this.firstfile.split(/[\r\n]+/)){ // <<<--- Trying to treat the OBJECT as a STRING element
      . . .
    }
    . . .
  }

To properly iterate through the contents of the file, you should utilize the FileReader helper.

For more information, refer to: Angular - Read a file and parse its content

Answer 4

The issue you are facing, as indicated by the error message

this.firstfile.split is not a function or its return value is not iterable

, is that you are attempting to loop through an object (in this case, the file itself) rather than its actual contents.

firstfileupload(event){
    . . .
    this.firstfile=event.target.files[0]  // <<<----- Here, you are storing the file as an OBJECT
    for(const line of this.firstfile.split(/[\r\n]+/)){ // <<<--- Trying to treat the OBJECT as a STRING element
      . . .
    }
    . . .
  }

To properly iterate through the contents of the file, you should utilize the FileReader helper.

For more information, refer to: Angular - Read a file and parse its content

Troubleshooting in TypeScript: Difficulty iterating line by line through an uploaded file on Angular 9 platform

Answer №1

Answer №2

Similar questions

Utilize TypeScript generics in Vue mixins by incorporating them into class components

What could be causing the request parameter in my ag-grid to be undefined?

Animated scrolling does not function properly with external links that are fully qualified

What is the best way to connect a text box to a nested object in the state of a React component?

Create a circular modal for the design

Maintain Symbolic Links in Angular Libraries

I'm struggling to change the color of a plane geometry in three.js, it always ends up black. Can anyone help me with this issue?

The process of including or excluding an item in an array

Storing user input in an array with the use of JavaScript

Issue with file operations in Ionic1 not functioning properly after scrolling in AngularJS

Utilizing Asp.Net for Developing Microservices

Organizing an angular expansion panel

Utilizing Material-UI with MobileDialog HOC in TypeScript: A Beginner's Guide

"TypeScript goes bonkers with a syntax error - shouting out about an

Is there a way to transfer the input value from a textfield in one component to another component in ReactJS?

Unable to utilize injection without the presence of an observer

Difficulty in accessing JSON data with Node.js

How do I adjust the controls in Three.js to align with the previous camera position?

Disable the default marker in Mapbox Geocoder