Cargar CSV en JavaScript

Cargar y leer un archivo csv en JavaScript sin necesidad de php, java u otro más.

Así es, tal y como lo leen, hoy les traigo un código que espero les ayude tanto como a mi me a ayudado hasta este momento, con un poco de lógica, que les dejara como resultado el contenido del archivo en un array.

Y como siempre lo digo... vamos al punto.

<div id="drop_file_zone" ondragover="return false" ondrop="upload_file(event)">
 <div id="drag_upload_file">
  <div id="datos">
   <h2>
    Drag and drop file here or click for selected file
   </h2>
  </div>
  <input id="selectfile" type="file" />
 </div>
</div>

<div id="dvCSV"></div>

dando como resultado lo siguiente

A esto demos le un poco de estilo.

#drop_file_zone{
 border: solid 1px;
 cursor: pointer;
 }
#drop_file_zone #drag_upload_file{
 height: 3em;
 padding: 1em;
 }
#drop_file_zone:hover{
 border-style: dashed;
 border-radius: 5px;
 border-color: blue;
 }
#drop_file_zone input[type=file]{
 display: none;
 }

Esto quedara así

Ahora lo mas esperado. Así es, el codigo.

Comencemos con las acciones del drop y el evento click a nuestra área de archivo.

---

$( '#drag_upload_file' ).click(function(){
 document.getElementById('selectfile').click();
 document.getElementById('selectfile').onchange = function () {
  uploadCsv( document.getElementById('selectfile').files[0], function(data){
   createTable( data );
  });
 };
});
function upload_file( e ){
 e.preventDefault();
 uploadCsv( e.dataTransfer.files[0], function(data){
  createTable( data );
 } );
}

function uploadCsv( fileUpload, callback ){}

function createTable( datos ){}

---

Con esto, decimos que cuando den click o bien cuando dejen un archivo en nuestra área esta invocará la función uploadCsv, la cual recibe como primer parametro el archivo del file upload mientras que en su segundo parametro deja una funcion de retorno.

Ahora bien el codigo de la funcion uploadCsv es el siguiente.


---

function uploadCsv(fileUpload, callBack) {
 var rtn = {};
 var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv)$/;
 if (regex.test(fileUpload.name.toLowerCase())) {
  rtn.name = fileUpload.name;
  rtn.data = [];
  rtn.size = fileUpload.size;
  rtn.encabezado = [];
  if (typeof (FileReader) != "undefined") {
   var reader = new FileReader();
   reader.onload = function (e) {
    var x = 0;
    var rows = e.target.result.split("\n");
    for (var i = 0; i < rows.length; i++) {
     var cells = rows[ i ].split( "," );
     var obj = {};
     var have = 0;
     for( var j = 0; j < cells.length; j ++ ){
      if( cells[ j ].length == 0 )break;
      have = 1;
      if( i == 0 ){
       obj[ 'field_' + j ] = ( cells[ j ].trim() ).toUpperCase();
      }else{
       var field =  rtn.encabezado[0]['field_' + j ] ;
       obj[ field ] = cells[ j ];
      }
     }
     if( i == 0 ){
      rtn.encabezado.push( obj );
     }else{
      if( have == 1 )
       rtn.data.push( obj );
     }
     x++;
    }
    rtn.total = x ;
    callBack( rtn );
   }
   reader.readAsText(fileUpload);//.files[0]);
  } else {
   callBack( "Este navegador no soporta html5" );
  }
 } else {
  callBack( "El archivo no es csv");
 }
}

---

Ahora solo falta el mostrar el contenido de nuestro archivo, y para ello nos creamos la funcion createTable con lo siguiente,


---

function createTable(datos) {
 var table = document.createElement("table");
 var rows = datos.data;
 var cells = Object.keys( datos.encabezado[ 0 ] );
 for (var i = 0; i < rows.length; i++) {
  var row = table.insertRow(-1);
  for (var j = 0; j < cells.length; j++) {
   var cell = row.insertCell(-1);
   cell.innerHTML = datos.data[i][ datos.encabezado[ 0 ][ cells[ j ] ] ];
  }
 }
 var head = table.createTHead( -1 );
 var row = head.insertRow( -1 );
 for( var j = 0; j < cells.length; j ++ ){
  var th = document.createElement( 'TH' );
  th.innerHTML = datos.encabezado[ 0 ][ cells[ j ] ];
  row.appendChild( th );
 }
 var caption = table.createCaption();
 caption.innerHTML = "
" + datos.name + "";

 var dvCSV = document.getElementById("dvCSV");
 dvCSV.append( table );
}

---

Y así de simple es como queda esto. no sin antes darle un mejor estilo a nuestra tabla creada a partir del contenido del archivo csv.


----

table{
 width: 100%;
 border: 1px;
 border-collapse: collapse;
}
table caption {
 border: solid 1px;
 font-size: larger;
 padding: 0.5em;
}
table thead tr th {
 padding: 0.75em;
 border: solid 1px;
 border-top: none;
 font-size: larger;
}
table tr td {
 border: solid 1px;
 padding: 0.5em;
 font-size: small;
}

----
dejando al final un resultado como el siguiente.

Espero les sirva de apoyo para su desarrollo, sin mas.. me despido por el momento, espero sus comentarios.