Creare l'anteprima per l'upload di immagini in JavaScript

In questo articolo vedremo comee creare l'anteprima per l'upload di immagini in JavaScript sfruttando le funzionalità della classe FileReader.

Dobbiamo essenzialmente leggere l'immagine scelta come URL di dati (Base64). La classe FileReader dispone del metodo readAsDataURL() che possiamo usare in questo modo:

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

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

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

Questa funzione usa le Promise per restituire l'URL di dati risultante dalla lettura dell'oggetto File. Quindi possiamo gestire l'evento change sul campo di input come segue:

function handleFile(input, preview, thumb, caption) {
    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 src = await fileToDataURI(file);
        const fileName = file.name;

        thumb.setAttribute('src', src);
        caption.innerText = fileName;
        preview.classList.add('visible');

    });
}

Otteniamo l'URL di dati e il nome dell'immagine dall'oggetto File contenuto nell'array files del campo di input. Con questi dati possiamo popolare gli elementi del DOM che costituiscono la nostra anteprima.

Demo

JavaScript Image Upload Preview

Conclusione

La classe FileReader ci consente di ottenere l'URL di dati dell'immagine scelta per l'upload permettendoci così di mostrarne l'anteprima sulla pagina.

Torna su