Improve Csv File Reader By Removing Quotes From Fields, Supporting A Header, And Allowing Other Seperators

I would like my file to not have quotations when displayed in html. Meaning there are quotes by every word. I would like to take that away. And I would also like to add a th tag so

Solution 1:

So I took a look at your code and made a jsfiddle off of it.

Heres the full fiddle

$(function() {
  $("#upload").bind("click", function() {
    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
    if (regex.test($("#fileUpload").val().toLowerCase())) {
      if (typeof(FileReader) != "undefined") {
        var reader = new FileReader(),
          table = $("<table>"),
          separator = ',',
          rows,
          rowLength;

        reader.onload = function(e) {
          rows = e.target.result.split(/[\r\n|\n]+/);
          rowLength = rows.length;

          for (var i = 0; i < rowLength; i++) {
            var row = $("<tr>"),
              cells = rows[i].split(separator),
              cellLength = cells.length,
              cell;

            for (var j = 0; j < cellLength; j++) {
              // Special case for the first row
              cell = (i === 0) ? $("<th>") : $("<td>");
              cell.html(cells[j]);
              row.append(cell);
            }

            // Special case for first row (thead)
            if (i === 0) {
              row = $('<thead>').html(row);
            }
            table.append(row);
          }
          $("#dvCSV").html('');
          $("#dvCSV").append(table);
        }
        reader.readAsText($("#fileUpload")[0].files[0]);
      } else {
        alert("This browser does not support HTML5.");
      }
    } else {
      alert("Please upload a valid CSV file.");
    }
  });
});

a {
  display: block;
}
table {
  border: 1px solid #ccc;
}
table th {
  background-color: #F7F7F7;
  color: #333;
  font-weight: bold;
}
table th,
table td {
  padding: 5px;
  border-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="http://samplecsvs.s3.amazonaws.com/SalesJan2009.csv">Dummy CSV</a>
<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" />
<hr />
<div id="dvCSV">
</div>

I made slight adaptations to it. It turns out (at least from the dummy csv I am using), that no quotes are being added...

The split-by-rows regex was not seeming to work, so I changed it to:

var rows = e.target.result.split(/[\r\n|\n]+/);

In the comments you wanted to add thead and th support. To do that, I just added a conditional on the two lines:

cell = (i === 0) ? $("<th>") : $("<td>");
if (i === 0) {
    row = $('<thead>').html(row);
}

You mentioned wanting to separate on things other than a comma. As you already know, you are dealing with "Comma-Separated-Values", so separating by comma is expected... but to make your code more generic, I added the separator in a variable instead (so you can swap that out with what you expect the separator to be):

var separator = ',';
var cells = rows[i].split(separator);

Hope that helped! :)

Solution 2:

$(function() {
  $("#upload").bind("click", function() {
    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
    if (regex.test($("#fileUpload").val().toLowerCase())) {
      if (typeof(FileReader) != "undefined") {
        var reader = new FileReader(),
          table = $("<table>"),
          separator = ',',
          rows,
          rowLength;

        reader.onload = function(e) {
          rows = e.target.result.split(/[\r\n|\n]+/);
          rowLength = rows.length;

          for (var i = 0; i < rowLength; i++) {
            var row = $("<tr>"),
              cells = rows[i].split(separator),
              cellLength = cells.length,
              cell;

            for (var j = 0; j < cellLength; j++) {
              // Special case for the first row
              cell = (i === 0) ? $("<th>") : $("<td>");
              cell.html(cells[j]);
              row.append(cell);
            }

            // Special case for first row (thead)
            if (i === 0) {
              row = $('<thead>').html(row);
            }
            table.append(row);
          }
          $("#dvCSV").html('');
          $("#dvCSV").append(table);
        }
        reader.readAsText($("#fileUpload")[0].files[0]);
      } else {
        alert("This browser does not support HTML5.");
      }
    } else {
      alert("Please upload a valid CSV file.");
    }
  });
});

a {
  display: block;
}
table {
  border: 1px solid #ccc;
}
table th {
  background-color: #F7F7F7;
  color: #333;
  font-weight: bold;
}
table th,
table td {
  padding: 5px;
  border-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="http://samplecsvs.s3.amazonaws.com/SalesJan2009.csv">Dummy CSV</a>
<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" />
<hr />
<div id="dvCSV">
</div>