Con l'introduzione delle API 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:
(function() {
const Importer = element => {
// element è il nostro input
this.el = document.querySelector( element );
this.init();
};
Importer.prototype = {
init() {
this.change();
},
change() {
const self = this;
const 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
}
self.el.addEventListener( 'change', e => {
const files = e.target.files; // Array dei file legati al campo
const file = files[0]; // File selezionato
if( !files.length ) { // Nessun file?
return;
}
if( !/csv/.test( file.type ) ) { // 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
const 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 ) {
// Salva i dati, ad esempio via AJAX
}
};
document.addEventListener( 'DOMContentLoaded', () => {
const importerInstance = new Importer( '#csv' );
});
})();