JavaScript: leggere il contenuto di un file CSV con le API HTML5

Con l'introduzione delle API HTML5 per i file in JavaScript si aprono scenari impensabili fino a qualche anno fa.

Data la seguente marcatura:

<input type="file" name="csv" id="csv">

e presupponendo un file CSV così strutturato:

A,B,C
1,2,3
4,5,6
...

possiamo scrivere il seguente codice JavaScript:

'use strict';

(function() {
	const Importer = function( element ) {
		// element è il nostro input
		this.el = document.querySelector( element );
		this.init();
	};
	
	Importer.prototype = {
		init() {
			this.change();
		},
		change() {
			const self = this;
			
			function readFile( file ) {                                                       
    			const reader = new FileReader(); // Istanza di FileReader
    			reader.onload = readSuccess;  // Leggiamo il file quando è stato caricato
    			                                          
    			function readSuccess( evt ) {
	    			// result racchiude i contenuti del file                         
        			const csv = self._parseCSV( evt.target.result );
        			self._insertData( csv );                                
    			}
    			
    			reader.readAsText( file ); // Leggiamo il file come testo                                              
			} 

			this.el.addEventListener( "change", function( e ) {
				
				 const files = e.target.files; // Array dei file legati al campo
				 const file = files[0]; // File selezionato
				 
				 if( !files.length ) { // Nessun file?
				 	alert( "Seleziona un file" );
				 	return;
				 }
				 if( !/csv/.test( file.type ) ) { // Solo file .csv
				 	alert( "Solo file CSV" );
				 	return;
				 }
				 
				 readFile( file ); // Leggiamo il file

			}, false);
		},
		_parseCSV( str ) {
			const lines = str.split( /\n/ ); // Otteniamo un array di righe
			const data = lines.slice( 1, lines.length ); // Eliminiamo le intestazioni CSV
			let items = [];

			for( let i = 0; i < data.length; ++i ) {
				let line = data[i];
				let parts = line.split( "," ); // Otteniamo un array di valori
                let [a, b, c] = parts;

				let item = {
					a,
					b,
					c
				};
				
				// Creiamo un array di oggetti

				items.push( item );
			}

			return items;
		},
		_insertData( items ) {
			// Inserisce i dati
		}
	};

	document.addEventListener( "DOMContentLoaded", function() {
		const importerInstance = new Importer( "#csv" );
	});
	
})();