Accesso ai file

Per ragioni di sicurezza, l'accesso ad un file, anche in sola lettura, ha da sempre rappresentato una limitazione di JavaScript all'interno di un Web browser. Per consentire anche la semplice visualizzazione del contenuto di un file si è costretti a studiare artifici come ad esempio inviare il file al server e ricaricarlo per visualizzare il suo contenuto o informazioni su di esso.

Grazie ad HTML5, oggi possiamo leggere il contenuto di un file direttamente da un browser senza coinvolgere il server. Naturalmente la questione sicurezza non è stata messa da parte. Infatti uno script in esecuzione su un browser non può autonomamente accedere ad un file del sistema.

Accedere ai file

L'accesso deve essere esplicitamente autorizzato dall'utente tramite l'elemento <input> o il drag and drop.

Sfruttare l'elemento input

Sfruttando l'elemento <input> consentiamo all'utente di indicare un file selezionandolo dal file system locale. Specificando l'attributo multiple, come mostrato nel seguente esempio, consentiamo la selezione di più file:

<input type="file" id="fileSelezionati" multiple>

Sfruttare il drag and drop

Leggermente più complessa è la situazione se si vuole consentire all'utente di specificare uno o più file tramite drag and drop. In questo caso dobbiamo prima definire un'area all'interno della quale consentire il drop dei file, ad esempio un <div>.

Quindi gestiamo gli eventi dragenter, dragover e drop come mostrato dal seguente codice:

var area = document.getElementById("area");
area.addEventListner("dragenter", dragenter);
area.addEventListner("dragover", dragover);
area.addEventListner("drop", drop);
function dragenter(event) {
	event.stopPropagation();
	event.preventDefault();
}
function dragover(event) {
	event.stopPropagation();
	event.preventDefault();
}
function drop(event) {
	event.stopPropagation();
	event.preventDefault();
	var files = event.dataTransfer.files;
	console.log(files.length);
}

I gestori dragenter e dragover apparentemente non fanno nulla di particolare tranne che impedire la propagazione dell'evento e il comportamento predefinito dell'operazione. Senza queste istruzioni tuttavia il trascinamento dei file sulla pagina causerebbe il loro caricamento all'interno della finestra del browser.

Il gestore dell'evento drop, invece, accede all'elenco dei file tramite la proprietà dataTransfer dell'oggetto event e mostra il numero di file trascinati all'interno della nostra area.

Usare i file

Cosa fare dei file selezionati dall'utente dipende naturalmente dalla nostra applicazione. è a questo punto che possiamo utilizzare le File API, un'interfaccia per l'accesso in lettura ai file selezionati dall'utente ed al loro contenuto.

Le API definiscono essenzialmente tre tipi di oggetto:

Oggetto	Descrizione
FileList	Rappresenta semplicemente una lista di file
File	Rappresenta un singolo file
FileReader	È l'oggetto che consente l'accesso in lettura al contenuto del file

Nell'esempio visto prima, in cui gestiamo il trascinamento dei file, abbiamo avuto modo di vedere la proprietà files dell'oggetto dataTransfer. Questa proprietà è proprio un oggetto di tipo FileList che consente di accedere all'elenco dei file selezionati dall'utente.

La stessa cosa avviene per un elemento <input> con l'attributo multiple. Il seguente codice mostra come accedere in questo caso all'elenco dei file selezionati dall'utente:

var fileSelezionati = document.getElementById("fileSelezionati").files;

Indipendentemente da come l'utente abbia selezionato i file, una volta avuto accesso alla lista possiamo gestirli sfruttando le funzionalità messe a disposizione dalle File API. Ad esempio, il seguente codice mostra all'interno di un elemento della pagina alcune informazioni su ciascun file selezionato:

var info = document.getElementById("infoDiv");
var file;
for (var i=0; i<fileSelezionati.length; i++) {
	file = fileSelezionati[i];
	info.innerHTML = info.innerHTML+file.name+
	                 " ("+file.size+" byte, "+
					 file.type+")<br/>";
}

Oggetto File

Le informazioni sui file mostrate fanno capo a tre proprietà di ciascun oggetto File:

Proprietà	Descrizione
name	Nome del file
size	Dimensione del file espressa in byte
type	Il tipo MIME del file, se è possibile determinarlo, altrimenti una stringa vuota

Ecco un esempio di output generato dallo script precedente:

setup.exe (478720 byte, application/x-msdownload)
setup.ini (279 byte, )
readme_it.txt (11598 byte, text/plain)
readme_it.html (12031 byte, text/html)

Infine esaminiamo l'oggetto FileReader nella prossima pagina della guida.