Oltre all'oggetto File, le File API definiscono l'oggetto Blob che rappresenta un insieme di dati non strutturati il cui significato dipende dal modo in cui questi vengono interpretati. Un oggetto di tipo File è derivato da un Blob con il supporto di funzionalità di interfacciamento con il file system dell'utente.
Il modo più semplice di creare un Blob è tramite l'omonimo costruttore:
var myBlob = new Blob(['<a href="http://www.html.it">HTML.it</a>'], {type: "text/html"});In questo esempio abbiamo creato un Blob il cui contenuto è un blocco di codice HTML.
- Il primo argomento del costruttore può essere un array di stringhe, di ArrayBuffer, di ArraBufferView o di altri Blob.
- Il secondo argomento è opzionale ed è un oggetto che rappresenta il tipo di contenuto secondo lo standard MIME.
Slice
Un oggetto Blob dispone del metodo slice() che consente di creare un nuovo Blob a partire da un blocco di dati del Blob corrente. Ad esempio, il seguente codice genera un nuovo Blob costituito dai byte che vanno dalla posizione 9 alla posizione 27:
var nuovoBlob = myBlob.slice(9, 27);Per la gestione del contenuto di un Blob possiamo utilizzare lo stesso approccio che abbiamo visto per i file tramite FileReader. Ad esempio, il seguente codice visualizza l'URL di HTML.it estratto dal Blob definito nell'esempio precedente:
var reader = new FileReader();
reader.onload = function(event) {
var URL = event.target.result;
console.log(URL);
};
reader.readAsText(nuovoBlob);Creare file da scaricare
Un Blob ci consente di creare file indipendentemente dal file system dell'utente.
Abbiamo detto che l'accesso ai file da un browser è consentito in sola lettura e su esplicita autorizzazione dell'utente. Per ovvie ragioni di sicurezza, anche la scrittura di un file dal browser sul file system dell'utente non è consentita. Possiamo tuttavia consentire il download di un file generato o manipolato via JavaScript sfruttando le funzionalità viste per gestire file e blob.
Consideriamo il seguente codice HTML:
<a href="" id="lnkDownload">download</a>Esso rappresenta il link per consentire all'utente il download del file generato o elaborato da JavaScript. Per abilitare il download di un file eseguiremo il seguente codice:
function abilitaDownload(file) {
var myBlob = new Blob([file], {type: "application/octet-stream"});
var reader = new FileReader();
reader.onload = function(event) {
var URL = event.target.result;
document.getElementById("lnkDownload").href = URL;
};
reader.readAsDataURL(myBlob);
}La funzione prende un oggetto di tipo File o un Blob e genera un nuovo Blob a partire da esso impostando il tipo MIME su application/octet-stream. L'impostazione del tipo MIME è effettivamente quella che indica al browser che il file non deve essere interpretato ma deve essere scaricato sul file system dell'utente.
A questo punto il nuovo Blob viene letto come data URL ed il risultato assegnato all'attributo href del nostro link. Quando l'utente cliccherà sul link verrà aperta la finestra di dialogo per salvare il file sul disco locale.
Un inconveniente di questa soluzione è che non viene definito il nome da assegnare al file da scaricare. Possiamo aggirare il problema impostando l'attributo download per l'elemento <a>:
<a href="" id="lnkDownload" download="myFile.zip">download</a>Il nome e l'estensione del file possono naturalmente essere generati dinamicamente in base al contenuto del file stesso.