Leggere il codice sorgente scelto per l'upload con JavaScript

In questo articolo vedremo una soluzione molto semplice per visualizzare l'anteprima del codice sorgente caricato in un form con JavaScript. Si tratta di una soluziome molto pratica in diversi contesti.

La classe FileReader contiene il metodo readAsText() che ci consente di leggere il contenuto dei file di testo, ossia di quei file in cui tipo MIME principale è text (CSS, JavaScript, HTML, ecc.).

Possiamo creare una funzione che gestisca l'evento load tramite Promise e restituisca il contenuto testuale del file:

function fileToText(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();

      reader.onload = () => resolve(reader.result);

      reader.onerror = () => reject;
      reader.readAsText(file);
    });
}

A questo punto la gestione dell'upload dei file può essere gestita come segue:

function handleFile(input, preview) {
    input.addEventListener('change', async (e) => {
      preview.classList.remove('visible');
      const file =
        e.target.files && e.target.files.length > 0 ? e.target.files[0] : null;
      if (!file) {
        return;
      }
      const text = await fileToText(file);
      const codeBlock = preview.querySelector('code');
      codeBlock.innerText = text;
      preview.classList.add('visible');
    });
}

Il form di upload dovrà comunque implementare dei controlli sul tipo MIME scelto in modo da evitare errori nel tentare di leggere il contenuto di file non supportati.

Demo

JavaScript Code Upload Preview

Conclusione

JavaScript dispone di API native per la lettura del contenuto dei file testuali. Questa feature è molto utile quando vogliamo fornire un'anteprima di questo tipo di file in un'interfaccia web.

Torna su