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

Question

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

Answer 1

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);
       }
    }
}

Answer 2

I made a upload functionality on my app. Hope it helps

Here's my sample upload function inside my component

uploadDatasource(fileInput: any) {

let file = fileInput.target.files[0];
let fileName = file.name;


let payload = {
  file,
}

let formData: FormData = new FormData();
formData.append('file',file,file.name);


this.DsListService.uploadDatasource(formData)
  .subscribe(
    response => { 
      console.log('UPLOADING success');


    },
    error => {
      console.log('error',error)
    });

}

here's my service class

import { Injectable } from '@angular/core';
import { Headers, Http, RequestOptions, Response, URLSearchParams } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Config } from '../config/config';

@Injectable()
export class DsListService {

  private config = new Config;

  constructor(private http: Http) { }


  uploadDatasource(payload): Observable<any[]> {
    let headers = new Headers();

    headers.append('Accept', 'application/json, text/plain,');
    let options = new RequestOptions({ headers: headers });


    return this.http.post(`API_UPLOAD_PATH`,payload, options)
      .map((res: Response) => {
        let data = res.json();
        return data;
      })
      .catch(error => Observable.throw(error))

  }
}

and here's my html

<input type="file" [(ngModel)]="Model.datasourcelistdata" name="datasource_upload" id="datasource_upload" accept=".xlsx,.xls,.csv" ngf-max-size="20MB" fd-input (change)="uploadDatasource($event)" />