CSV or comma-separated-values is one of most popular file format used to store tabular data, such as a database or spreadsheet. Using new HTML5 FileReader API you can read a csv on fly, no server side interaction is required. To read a data from a csv file we will be using most popular HTML5 FileReader API powered csv parser, Papa Parse



Browser Supports

  • IE 10+
  • Safari 6+
  • Firefox 3+
  • Chrome 4+
  • Opera 11+

Why use Papa Parse?

1. open source, well-maintained project and also free

2. fast,multi-threaded CSV parser can parse millions of data.

3. no dependency

4. Multiple browsers supports

5. can set the different encoding

6. can skip commented characters

7. using stream you’ll get row by row data to prevent browser crashing for large files

Papa is the first (and so far only) multi-threaded CSV parser that runs on web pages. It can parse files gigabytes in size without crashing the browser. It correctly handles malformed or edge-case CSV text. It can parse files on the local file system or download them over the Internet. Papa is boss.

In our demo, we will be reading data from a user uploaded CSV file , then will render the data in the html table. You can persist the data using local storage or can send to the server side. So first check out our demo

The new File Reader API allows the browser to directly interact with files on the file system. But you won’t access any file directly for security reason.

Creating the markup

First, we need to create a HTML form markup with input file field and also a submit button

1
2
3
4
5
6
7
8
9
<form class="form-inline">
<div class="form-group">
  <label for="files">Upload a CSV formatted file:</label>
  <input type="file" id="files"  class="form-control" accept=".csv" required />
</div>
<div class="form-group">
 <button type="submit" id="submit" class="btn btn-primary">Submit</button>
 </div>
</form>

As you can see our input field is a required field and only allows to choose CSV formatted file.

Papa parse initialization

The CSV file is selected in file Input when the submit button is triggered. We will be calling a submit callback function to perform parse operation. Our first task is to initialize papa parse.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
$('#submit').on("click",function(e){
    e.preventDefault();
 
    $('#files').parse({
        config: {
            delimiter: "auto",
            complete: buildTable,
        },
        before: function(file, inputElem)
        {
            //console.log("Parsing file...", file);
        },
        error: function(err, file)
        {
            //console.log("ERROR:", err, file);
        },
        complete: function()
        {
            //console.log("Done with all files");
        }
    });
});

Most of the code is self-explanatory, first, we have to configure some parameter using config object, such as delimiter, callback complete function, which we’ll use to play with the data. the whole config list can be found here

papa parse also has some lifecycle callback methods such as before, after, complete.

Play with the json data

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
function buildTable(results){
    var markup = "<table class='table'>";
    var data = results.data;
     
    for(i=0;i<data.length;i++){
        markup+= "<tr>";
        var row = data[i];
        var cells = row.join(",").split(",");
         
        for(j=0;j<cells.length;j++){
            markup+= "<td>";
            markup+= cells[j];
            markup+= "</th>";
        }
        markup+= "</tr>";
    }
    markup+= "</table>";
    $("#app").html(markup);
}

we have written a custom function “buildTable” which will be trigger after completion of the parsing. Papa parse returns a json object with all parsed data. Now we can easily loop through all data and rendered in the HTML table.

you can download the full code by kicking below download button

DOWNLOAD