How to Upload csv using angular and parse data using express API and sent response

Question

I m trying to send csv file to express api, M using angular at front-end Here is the sample code- app.component.html file

<div>
  <h1 style="text-align:center">CSV File Upload</h1>
  <form enctype="multipart/form-data"> 
      <input type="file" name="csvreport" id="csvreport" (change)="fileupload($event.target.files)">
  </form>
</div>

app.component.ts file

import { Component } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  constructor(private http: HttpClient) {}

  fileupload(files: FileList) {
    let file: File = files.item(0);
    let formData = new FormData();

    formData.append("file", file, file.name);
    this.http.post('http://localhost:5000/chartreportx/us-central1/chartreportapi/reportfile', formData)
    .subscribe(data=>{console.log(JSON.stringify(data))}, err=>{console.log(err)});
    console.log(JSON.stringify(file.name));
  }
}

I suspect that the issue is with api, I have tried multiple methods to get the formdata parse in the right way but all gives null result, Finally I got array buffer as output, but still array buffer is not valid

Express API:

import * as functions from 'firebase-functions';
import * as express from "express";
import * as bodyParser from "body-parser";
import * as csvtojson from 'csvtojson';
import * as file_upload from 'express-fileupload';


const app = express();
app.use(file_upload())
app.use(bodyParser.json());
app.use(
  bodyParser.urlencoded({
    extended: false
  })
);
app.use(function(req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  res.setHeader(
    "Access-Control-Allow-Methods",
    "POST, GET, PATCH, DELETE, OPTIONS"
  );
  next();
});

app.get('/',(req, res) =>{
    res.status(200).json({chartreportapi:'works'});
})


app.post('/reportfile', (req, res)=>{
    let csvDataBuffer = JSON.stringify(req.body);
    let csvData = JSON.parse(csvDataBuffer).data;
    let csvDataString = csvData.toString('utf8')
    console.log(csvData.toString('utf8'));
    return csvtojson().fromString(csvDataString).then(json => {return res.status(201).json({csv:csvDataString, json:json})})

})

exports.chartreportapi = functions.https.onRequest(app)

Output which i m getting with this API is as follows, but is not the desired result:

{"csv":"45,45,45,45,45,45,87,....","json":[]}

Have also checked many SO questions for this issue, but not found any proper solution, Please let me know what is going wrong, also any further detail is required on this

Here's an article that might help you out when processing your CSV: techighness.com/post/… — Brandon Taylor
– Brandon Taylor, Commented Oct 23, 2018 at 1:37
@Brandom the article speaks about using more packages like multer, fast-csv, is it necessary to use this package, when i upload files using normal html, api works, but it creates issue when i try to use it in angular — Vino
– Vino, Commented Oct 23, 2018 at 2:11
No, they're not, but they can certainly make things more convenient. Uploading multi-part data from Angular is sometimes finicky. — Brandon Taylor
– Brandon Taylor, Commented Oct 23, 2018 at 2:13
I will try them in little time, but can you help me in understanding what is getting wrong with above code — Vino
– Vino, Commented Oct 23, 2018 at 2:18
Seems like you're trying to parse the entire request body as the CSV file instead of the CSV file itself would be my guess. — Brandon Taylor
– Brandon Taylor, Commented Oct 23, 2018 at 2:25

Vino · Accepted Answer · 2018-10-28 12:51:52Z

I didn't got the exact issue, but what i found sending raw file data using angular is bit noisy, so I have converted the data to string before sending it to API-

Method Updated in app.component.ts file

fileupload(files: FileList) {
    if (files && files.length > 0) {
      let file: File = files.item(0);
      let fileReader: FileReader = new FileReader();
      fileReader.readAsText(file);
      fileReader.onload = ev => {
        let csvdata = fileReader.result.toString();
        let body = {data:csvdata};
        return this.http.post('apiurl',body)
         .subscribe((data:any)=>console.log(JSON.stringify(data.json)));
      };
    }
  }

Now I m getting data in string format, so it is now easy to convert string into json

API method updated-

 app.post('/reportfile', (req, res)=>{
      let csvDataBuffer = JSON.stringify(req.body);
      let csvData = JSON.parse(csvDataBuffer).data;
      let csvDataString = csvData.toString("utf8");
        return csvtojson()
         .fromString(csvDataString)
         .then(json => {
           return res.status(201).json({csv:csvDataString, json:json})
          })
     })

In this way i was able to convert the csv file to json data using API, the same csv file can also be converted to json at client side, but requirement was to do at API

Collectives™ on Stack Overflow

How to Upload csv using angular and parse data using express API and sent response

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related