Angular 4 - Upload CSV

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>

Fahad Nisar · Accepted Answer · 2017-07-17 08:21:49Z

7

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)"/>

edited Jul 17, 2017 at 8:21

answered Jul 17, 2017 at 8:09

Fahad Nisar

1,73313 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

fangio Over a year ago

how can I get the data, for example I need to import the file with input type="file"....

fangio Over a year ago

I do have an error: Property 'result' does not exist on type 'EventTarget'

Fahad Nisar Over a year ago

can you console what you are getting in event ?

Fahad Nisar Over a year ago

Let us continue this discussion in chat.

fangio Over a year ago

It has to do with angular 4 and the new typescript, I had to define a new interface to make it work, github.com/Microsoft/TypeScript/issues/…

|

Collectives™ on Stack Overflow

Angular 4 - Upload CSV

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related