JavaScript : Prévisualiser une image avant l'upload

Introduction

En disant « prévisualiser une image avant l'upload », nous voulons dire afficher une image choisie au formulaire d'upload de fichier avant de l'envoyer vers le serveur.

Pour mettre en place ce système, nous allons commencer par créer un formulaire HTML d'upload de fichier puis nous allons lire l'image sélectionnée pour l'upload en utilisant JavaScript pour l'afficher sur la page.

Le formulaire HTML d'upload de fichier

Un formulaire d'upload de fichier avec les composants minimums peut se présenter de la manière suivante :

<form method="post" url="/upload-picture" enctype="multipart/form-data" >

    <input type="file" name="picture" onchange="previewPicture(this)" required >

    <button type="submit" >Uploader</button>

</form>

<img src="#" alt="" id="image" style="max-width: 500px; margin-top: 20px;" >

Nous avons  :

• Le formulaire <form> avec les attributs method="post" et enctype="multipart/form-data" pour envoyer le fichier à l'URL « /upload-picture » via la méthode POST.
• Un champ <input> avec les attributs type="file" pour sélectionner un fichier. Lorsqu'il change, c'est à dire un fichier est sélectionné, la fonction previewPicture(this) est appelée. this représente l'élément <input>
• Une image <img> avec l'identifiant id="image" pour afficher l'image choisi au formulaire

Afficher une image sélectionnée au formulaire

Nous allons maintenant décrire la fonction JavaScript previewPicture() qui est appelée lorsqu'un fichier est sélectionnée au formulaire HTML. Pour lire et afficher une image choisie, nous pouvons utiliser l'objet JavaScript URL ou FileReader

Méthode 1 : L'objet URL

L'object JavaScript URL fournit des méthodes statiques pour créer des URL d'objet.

Il présente la méthode createObjectURL(objet$) qui retourne une chaîne de caractères contenant un Blob URL de l'objet $objet.

Nous pouvons l'utiliser dans la fonction previewPicture() pour prévisualiser une image sélectionnée au formulaire de la manière suivante :

<script type="text/javascript" >
    // L'image img#image
    var image = document.getElementById("image");
     
    // La fonction previewPicture
    var previewPicture  = function (e) {

        // e.files contient un objet FileList
        const [picture] = e.files

        // "picture" est un objet File
        if (picture) {
            // On change l'URL de l'image
            image.src = URL.createObjectURL(picture)
        }
    } 
</script>

Méthode 2 : L'objet FileReader

L'object JavaScript FileReader permet de lire le contenu d'un fichier (File ou Blob) de façon asynchrone.

Nous pouvons l'utiliser pour prévisualiser une image sélectionnée au formulaire de la manière suivante :

<script type="text/javascript" >
    // L'image img#image
    var image = document.getElementById("image");
     
    // La fonction previewPicture
    var previewPicture  = function (e) {

        // e.files contient un objet FileList
        const [picture] = e.files

        // "picture" est un objet File
        if (picture) {

            // L'objet FileReader
            var reader = new FileReader();

            // L'événement déclenché lorsque la lecture est complète
            reader.onload = function (e) {
                // On change l'URL de l'image (base64)
                image.src = e.target.result
            }

            // On lit le fichier "picture" uploadé
            reader.readAsDataURL(picture)

        }
    } 
</script>

Pour terminer, il faut penser à la validation du fichier sélectionné au formulaire pour s'assurer que c'est une image avant de l'afficher. Nous pouvons procéder de la manière suivante :

1. Indiquer au client (navigateur) les types de fichier autorisés via l'attribut accept sur le champ <input> pour filtrer les fichiers par extensions autorisés dans l'explorateur de fichiers :

<input type="file" name="picture" onchange="previewPicture(this)" accept=".jpg, .png, .gif" required >

2. Vérifier le type MIME du fichier :

var previewPicture  = function (e) {
    // e.files contient un objet FileList
    const [picture] = e.files

    // Les types de fichier autorisés
    var types = [ "image/jpg", "image/jpeg", "image/png" ];

    // Vérification si "picture.type" se trouve dans "types"
    if (types.includes(picture.type)) {
        // On affiche l'image sur la page ...
    }
}

Portez-vous bien ! 😉