JSFiddle - React, Tailwind, and code Playground

by Tyler Stark

HTML

<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>

CSS

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; }

JavaScript

$(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 {
              ...