How to upload a CSV file and read them using angular2?

user_7469062 0
Viewed 50459

i have a requirement of uploading a .CSV file and read them inside my component, i have gone through this blog but it has a .CSV file stored in a particular loaction, i want to upload the .CSV file and read them inside my component. How can i do it

Do we have any build in plugin which we can use? if not then how can we achieve this goal.

this is code which i have tried

view

<input type="file" name="File Upload" id="txtFileUpload" 
        (change)="changeListener($event)" 
        accept=".csv"/>

component

changeListener($event:Response): void {
    debugger;
   // i am not able to get the data in the CSV file
  }

in the changeListener(), i am not able tom get the content of the .CSV file, can anyone help me on this?

thank you

angular
4 Answers

Upload your csv file to a location and get the csv file data. Please try this:-

Component.html:- 

<input type="file" class="upload" (change)="changeListener($event.target.files)">

Component.ts:- 

public changeListener(files: FileList){
  console.log(files);
  if(files && files.length > 0) {
     let file : File = files.item(0); 
       console.log(file.name);
       console.log(file.size);
       console.log(file.type);
       let reader: FileReader = new FileReader();
       reader.readAsText(file);
       reader.onload = (e) => {
          let csv: string = reader.result as string;
          console.log(csv);
       }
    }
}
user_77384330

Papa Parse wrapper library for Angular is one of the best solution to parse CSV files in Angular component. You can install the library using following command for Angular 6 and 7:

npm install ngx-papaparse@3 --save

First import the PapaParseModule into your app.

import { PapaParseModule } from 'ngx-papaparse';

@NgModule({
  ...
  imports: [
    ...
    PapaParseModule
  ]
})

In your Component Template:

<input type="file" #fileImportInput name="CSV File Upload" 
(change)="fileChangeListener($event)" accept=".csv">

Then use it in a component or service:

import { Component } from '@angular/core';
import { Papa } from 'ngx-papaparse';

@Component({
  ...
})
export class AppComponent {

    constructor(private papa: Papa) {

        // TEST IF YOUR PARSER IS WORKING FINE
        const csvData = '"Hello","World!"';

        this.papa.parse(csvData,{
            complete: (result) => {
                console.log('Parsed: ', result);
            }
        });
    }

  // LOAD CSV FILE FROM INPUT
  fileChangeListener($event: any): void {

    const files = $event.srcElement.files;

    if (files !== null && files !== undefined && files.length > 0) {
      this.selectedCSVFileName = files[0].name;

      const reader: FileReader = new FileReader();
      reader.readAsText(files[0]);
      reader.onload = e => {

        const csv = reader.result;
        const results = this.papa.parse(csv as string, { header: false });

        // VALIDATE PARSED CSV FILE
        if (results !== null && results !== undefined && results.data !== null &&
          results.data !== undefined && results.data.length > 0 && results.errors.length === 0) {
          this.isCSV_Valid = true;

          // PERFORM OPERATIONS ON PARSED CSV
          let csvTableHeader = results.data[0];

          let csvTableData = [...results.data.slice(1, results.data.length)];

        } else {
          for (let i = 0; i < results.errors.length; i++) {
            console.log( 'Error Parsing CSV File: ',results.errors[i].message);
          }
        }
      };
    } else {
      console.log('No File Selected');
    }

  }
}

*Note: In case you don't want to use a Library and manually want Parse the CSV File you can do that as well.

Here is the reference blog post to parse CSV File without any library: https://blog.developershive.com/how-to-import-csv-file-in-angular-7-no-library-needed/blog/develkwl/

user_102941520

upload your csv file to a location and get the location URL and the uploaded csv file name and use this service i created. 

import { Injectable, Inject} from '@angular/core';
import { Http } from '@angular/http';
import {HttpService} from './http.service';
@Injectable()
export class CSVSERVICE {
  csvUrl: string = './csv_upload?id=';  // URL to web API
  csvData: any[] = [];

  constructor (private http: Http) {}

  readCsvData (fileName) {
   return  this.http.get(this.csvUrl + fileName)
    .map(
      (idata) => {
        let csvData = idata['_body'] || '';
    let allTextLines = csvData.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 and 
            console.log(tarr);
            lines.push(tarr);
        }
    }
    return lines;
      }, // this.extractData,
      err => this.handleError(err)
    );
  }



  private handleError (error: any) {
    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg);
    return errMsg;
  }
}
user_35062940
Related