JSFiddle - React, Tailwind, and code Playground

HTML

Select a file: <input type="file" id="myFile">
<button onclick='processFile()'>Process</button>
<table id="myTable"></table>

JavaScript

function processFile() {
    var fileSize = 0;
    //get file
    var theFile = document.getElementById("myFile");
    
     var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
     //check if file is CSV
     if (regex.test(theFile.value.toLowerCase())) {
     //check if browser support FileReader
        if (typeof (FileReader) != "undefined") {
        //create html5 file reader object
        var myReader = new FileReader();
        // call filereader. onload function
        myReader.onload = function(e) {
            var content = myReader.result;
            //split csv file using "\n" for new line ( each row)

            var lines=content.split("\n");

            var result = [];

            var headers=lines[0].split(",");

            for(var i=1;i<lines.length;i++){

              var obj = {};
              var currentline=lines[i].split(",");

              for(var j=0;j<headers.length;j++){
                obj[headers[j]] = currentline[j];
              }

              result.push(obj);

           }
      
           //return result; //JavaScript object
           console.log( JSON.parse(JSON.stringify(result))); //JSON
          
        }
        //call file reader onload
        myReader.readAsText(theFile.files[0]);
        }
        else {
                alert("This browser does not support HTML5.");
            }
        
    }
    else {
                alert("Please upload a valid CSV file.");
    }
    return false;
}