How to read a csv file on angular2 line by line

I am programming an application in angular2 that reads a csv file with a simply input in html:

<input type='file' name='userFile' id='file' >

I can access to the file at the component.ts:

ngOnInit() {

   var input = (<HTMLInputElement>document.getElementById("file"));
   input.addEventListener("change", function(event) {
      var files = input.files;
      var len = files.length;

         if (len) {
          console.log("Filename: " + files[0].name);
          console.log("Type: " + files[0].type);
          console.log("Size: " + files[0].size + " bytes");
    
         }

      }, false);

}

How can I read cell by cell a csv file uploaded using typescript, JavaScript or jQuery? (and which is the best way to do it).

4 thoughts on “How to read a csv file on angular2 line by line”

  1. Here is a example implementation angular way (Angular version 2+):

    @Component({
      selector: 'app-my-file',
      template: `
       <div class="form-group">
            <input type="file" (change)="onFileSelect($event.target)" name="myfile">
       </div>
      `,
      styles: [``]
    })
    export class YourComponent implements OnInit {
    
        csvContent: string;
        
        constructor(){}
        ngOnInit(){
        }
    
        onFileLoad(fileLoadedEvent) {
                const textFromFileLoaded = fileLoadedEvent.target.result;              
                this.csvContent = textFromFileLoaded;     
                // alert(this.csvContent);
        }
    
        onFileSelect(input: HTMLInputElement) {
        
          const files = input.files;
          var content = this.csvContent;    
          if (files && files.length) {
             /*
              console.log("Filename: " + files[0].name);
              console.log("Type: " + files[0].type);
              console.log("Size: " + files[0].size + " bytes");
              */
              
              const fileToRead = files[0];
              
              const fileReader = new FileReader();
              fileReader.onload = this.onFileLoad;
    
              fileReader.readAsText(fileToLoad, "UTF-8");
          }
                  
        }
    }
    

    Try it on StackBlitz

    Reply
  2. csv2Array(fileInput: any){
    //read file from input
    this.fileReaded = fileInput.target.files[0];
    
    let reader: FileReader = new FileReader();
    reader.readAsText(this.fileReaded);
    
    reader.onload = (e) => {
      let csv: string = reader.result;
      let allTextLines = csv.split(/\r|\n|\r/);
      let headers = allTextLines[0].split(',');
      let lines = [];
    
      for (let i = 0; i < allTextLines.length; i++) {
        // split content based on comma
        let data = allTextLines[i].split(',');
        if (data.length === headers.length) {
          let tarr = [];
          for (let j = 0; j < headers.length; j++) {
            tarr.push(data[j]);
          }
    
          // log each row to see output 
          console.log(tarr);
          lines.push(tarr);
        }
      }
      // all rows in the csv file 
      console.log(">>>>>>>>>>>>>>>>>", lines);
    } }
    
    Reply
  3. I found a way to extract the text:

        var fr = new FileReader();
        fr.onload = function(e) {
          var text = fr.result;
          console.log(text);
        };
        fr.readAsText(files[0]);
    

    And then using split separate rows and cells into arrays:

    var rows = text.split("\n");
    console.log("Row 0 " + rows[0]);
    console.log("Row 1 " + rows[1]);
    console.log("Row 2 " + rows[2]);
    var row1 = rows[0].split(";");
    console.log("Value 0,0 " + row1[0]);
    console.log("Value 0,1 " + row1[1]);
    console.log("Value 0,2 " + row1[2]);
    

    *This code doesn’t work well if cells contain “;” characters, wich is not the case of my application.

    Reply
  4. I wrote a function as a Promise

      /**
       * Returns the CSV file content as a string.
       * New lines are separated by '\n' inside the string.
       * @param file 
       */
      public async readCSVFile(file: File): Promise<string | ArrayBuffer> {
        return new Promise<string | ArrayBuffer>((resolve, reject) => {
          const reader = new FileReader();
    
          reader.onload = e => {
            return resolve((e.target as FileReader).result);
          };
          reader.onerror = e => {
            console.error(`FileReader failed on file ${file.name}.`);
            return reject(null);
          };
    
          if (!file) {
            console.error('No file to read.');
            return reject(null);
          }
          reader.readAsText(file);
        });
      }
    

    You can use it like this

    this.readCSVFile(myCsvFile).then((fileContents) => {
          //fileContents --> CSV file content as a string
     });
    

    And, if you are fighting with spanish characters like ñ, this worked for me

    reader.readAsText(file, 'ISO-8859-3');
    
    Reply

Leave a Comment