Angular 4 - Upload CSV - html

Question

I am making an Angular4
I have a button that converts data to a csv file with header.
Now I want to do it the other way around, I want to upload a csv file.
So for testing, I make an object and make a csv file from it, and then I want to click on a button and upload that file and get the same result.
I found an angular module to export csv, but I can't find one that does it the other way around. Can someone help me with that?
This is my code:
test.ts
import { Component, OnInit} from '#angular/core';
import { Angular2Csv } from 'angular2-csv/Angular2-csv';
import {Unit} from "../../../_shared/unit";
#Component({
moduleId: module.id,
templateUrl: 'test.component.html',
styleUrls: ['./test.css']
})
export class TestComponent implements OnInit {
ngOnInit() {}
public export() {
// Unit (id,name,description)
var data = [new Unit(1,"Unit1","This is unit 1!")];
var options = {
fieldSeparator: ';',
quoteStrings: '"',
decimalseparator: ',',
showLabels: true,
useBom: true
};
new Angular2Csv(data, "data", options);
}
public import(){}
}
test.html
<button (click)="export()">Download CSV</button>
<button (click)="import()">Upload CSV</button>

Answer 1

You can achieve the functionality using a custom function, Try this :
private extractData(data) { // Input csv data to the function
let csvData = data;
let allTextLines = csvData.split(/\r\n|\n/);
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]);
}
lines.push(tarr);
}
}
console.log(lines); //The data in the form of 2 dimensional array.
}
You can find the detailed post here: http://blog.sodhanalibrary.com/2016/10/read-csv-data-using-angular-2.html#.WWxu9XV97OQ
You can read the file inside the file listener function like this:
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var file = files[0];
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(event){
var csv = event.target.result; // Content of CSV file
this.extractData(csv); //Here you can call the above function.
}
}
Inside html do this:
<input type="file" (change)="handleFileSelect($event)"/>