【JAVASCRIPT】Read CSV file with File API

index.html

 <input type="file" name="select" id="select" />
<div id="result"></div> 

javascript-read-csv-file-with-file-api.markdown

【JAVASCRIPT】Read CSV file with File API

A Pen by Edward Lance Lorilla on CodePen.

License.

script.js

// Check if it supports File API
if (window.File) {
  var result = document.getElementById ('result');
  var select = document.getElementById ('select');
  
  // When a file is selected
  select.addEventListener ('change', function (e) {
    // Get information about the selected file
    var fileData = e.target.files [0];
    
    var reader = new FileReader ();
    // When file reading fails
    reader.onerror = function () {
      alert ('Failed to read file')
    }
    // When the file is read successfully
    reader.onload = function () {
      // Make an array in units of rows
      var lineArr = reader.result.split ('\n');
      // Make a two-dimensional array of rows and columns
      var itemArr = [];
      for (var i = 0; i <lineArr.length; i ++) {
        itemArr [i] = lineArr [i] .split (',');
      }
      
      // Output as table
      var insert ='<table border="1">';
      for (var i = 0; i <itemArr.length; i++) {
        itemArr[i] = lineArr[i] .split (',');
      }
      
      
      for (var i = 0; i <itemArr.length; i++) {
        insert +='<tr>';
        for (var j = 0; j <itemArr [i] .length; j++) {
          insert +='<td>';
          insert += itemArr[i][j];
          insert +='</td>';
        }
        insert +='</tr>';
      }
      insert +='</table>';
      result.innerHTML = insert;
    }
    
    // Perform file read
    reader.readAsText (fileData);
  }, false);
}