How To Parse And Upload A CSV File Using Javascript (PapaParse)

Siva Kishore G

Posted : 01 Sep 2022
Modified : 01 Sep 2022

Expert Developers

Introduction

CSV (Comma Separated Values) or TSV (Tab Separated Values) is the most common data classification template next to xls and json. In this tutorial, we will learn how to parse and upload a csv file into an express application.

For this, we will use a powerful library called PapaParse Microsoft's XLSX / XLS and Google Sheets can readily be converted to CSV. If you don't have Microsoft's office suite, upload the xls / xlsx file into the google drive and open it with google sheets.

Below picture is a demonstration of how to convert a xls file to a csv file.

Setup

You must have an express application running, a sample csv, bootstrap 5, papaparse library (download the papaparse.min.js file) and a million dollars (Just kidding!).

<script href="/path-of-folder/papaparse.min.js"></script>

Papaparse

Before we get into the pool... I mean, the working example, it's better to know a little bit about papabear... I mean papaparse. I'm on fire today!

Written in JS.
Can offload the work to worker thread.
Convert CSV to JSON and vice versa.
Ability to pause, resume and abort parser on the run.
Extensive documentation.
Parse local and remote csv files.
JQuery helper.
Can work with any delimiter including custom ones.
Stream data in case of a large file. (Step option)

Step option will not work if worker threads are enabled

Parse CSV File

I like working with bootstrap as I can style my file input element easily. Ok then, let's get into the example.

Since we are only working with CSV files, it's better to restrict the file input tag to .csv using the accept attribute.

<input type="file" accept=".csv" id="csv" class="form-control">

The below function accepts the file supplied from the input element and parses the data step by step while appending the header to each row. The result will be a json with appropriate headers.

var file = document.getElementById("cvs").files[0]
Papa.parse(file, {
  header : true,
	step : function(results,parser) {
    console.log("Result", results.data)
	},
  complete : function(results, file) {
    console.log("Parsing Cmpleted")
  }
});

Upload CSV (one row at a time)

PapaParse has functions like pause, resume and abort which are extremely helpful in this scenario. Let's say, we want to upload the csv into a database. The application will crash if we cram all the data once. So, we will wait for the response from the server for every row in the CSV uploaded. See the example below.

Papa.parse(file, {
  header:true,
	step: function(results,parser) {
    parser.pause()
    $.ajax({
      url: '/<UPLOAD-PATH>',
      type: 'post',
      cache: false,
      data: {row:results.data},
      success: function(data){
        parser.resume()
      },
      error: function(err){
        parser.abort()
      }
    })
	},
  complete: function(results, file) {
    console.log("Parsing Completed")
  }
});

Do not close the page while upload is in progress

Conclusion

This is an in browser example which is prone to errors if you lost power, or lost internet or simply closed the page. If you worry about this, then you can simply upload the complete file to the server and have the server take care of the uploading part. I suggest offloading the server uploading process to a new node or lambda in case of AWS. The idea here is to keep the server free from computations.