Angular 2 upload parse CSV

Question

I'm a beginner in Angular and I'm trying to create a feature of uploading and registering content with CSV files.

It is as follows:

parts.component.html

<div class="well">
  <form>
    <div class="row">
      <div class="col-md-10">
        <input class="form-control" id="file" name="file" (change)="readCsvData($event)" type="file" accept="text/plain">
      </div>
      <div class="col-md-2">
        <button class="btn btn-success" type="submit">Enviar arquivo</button>
      </div>
    </div>
  </form>
</div>

parts.component.ts

readCsvData(){
  let csvUrl = event.target;
  this.partService.upload(csvUrl)
}

part.service.ts

public upload(input: any){
    let url = this.partsUrl;
    let body = this.extractData(input);
    console.log(body);
    // return this.http.post()
  }
public extractData(data: any) {
    const file = data.files[0];
    const reader = new FileReader();
    reader.onload = function(e) {
      const content = reader.result;
      var lines = content.split("\n");
      var result = [];
      var headers = lines[0].split(",");
      for(var i = 1; i < lines.length; i++){
        var obj = {};
        var currentline = lines[i].split(",");
        for(var j = 0; j < headers.length; j++){
          obj[headers[j]] = currentline[j];
        }
        result.push(obj);
      }
      JSON.stringify(result);
    }
    reader.readAsText(file);
 }

But my Upload function only returns Undefined in the varable body, when in fact it should return the array of objects from the extractData function.

Thanks any help!

Gabriel Balsa Cantú · Accepted Answer · 2018-06-29 20:41:37Z

1

Similar to Rob's answer, but don't use third party packages for simple string operations:

<input type="file" accept=".csv" (change)="processFile($event)">

processCsv(content){
    content.split('\n');
    // other sorts of magic
}

convertFile(event: any) {
  const file = event.target.files[0];
  readFileContent(file).then(content => {
    console.log('This is your file as string: ', content);
    // Operate your string as required in a separate function
    this.processCsv(content)    
  }).catch(error => console.log(error))
}

readFileContent(file) {
    const reader = new FileReader()
    return new Promise((resolve, reject) => {
    reader.onload = event => resolve(event.target.result)
    reader.onerror = error => reject(error)
    reader.readAsText(file)
  })
}

answered Jun 29, 2018 at 20:41

Gabriel Balsa Cantú

2,0521 gold badge15 silver badges11 bronze badges

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

Comments

Robert Leeuwerink · Accepted Answer · 2018-06-29 17:01:44Z

0

try looking into this npm package csvtojson

also if you are using angular you should be using const and let, try not to use var.

this is how I used it

<input type="file" accept=".csv" (change)="convertFile($event)">

convertFile(event: any) {
  this.file = event.target.files[0];
  const reader = new FileReader();
  reader.readAsText(this.file);
  reader.onload = () => {
    this.textToCsv(reader.result);
  };
}

https://github.com/Robbie106gti/nc-catalog/blob/master/src/sop/components/csvtojson/csvtojson.component.ts

answered Jun 29, 2018 at 17:01

Robert Leeuwerink

4895 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular 2 upload parse CSV

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related