Dans le domaine du développement Web, il existe plusieurs façons de télécharger des fichiers lors de la collecte des commentaires des utilisateurs. L'une des méthodes est le copier-coller. Le copier-coller pour la saisie de fichiers est une méthode très intuitive de téléchargement de fichiers par les utilisateurs. La méthode de saisie de fichier copier-coller évite aux utilisateurs d'avoir à mémoriser l'emplacement du fichier qu'ils souhaitent télécharger. Dans cet article, nous verrons comment vous pouvez implémenter la saisie de fichiers par copier-coller sur votre site Web.

Nous implémenterons l'entrée de fichier copier-coller en profitant des interfaces ClipboadEvent et EventTarget. L'interface ClipboardEvent fournit des informations sur l'événement coller et l'interface EventTarget nous permet d'écouter l'événement coller.

Pendant l'écoute de l'événement coller, nous attacherons une fonction de gestionnaire d'événements où nous déciderons quoi faire avec les éléments collés. Dans notre cas, nous prendrons le fichier collé et le restituerons instantanément une fois qu'il sera complètement chargé dans le navigateur. Nous commencerons par le HTML et les styles.

Le HTML et les styles

Commençons par créer le balisage HTML de la zone de collage. L'extrait de code ci-dessous est le balisage HTML :

    
    
    
    


    

        Paste your file here
    
    

    

L'extrait de code ci-dessus affiche un conteneur rectangulaire dans lequel nous pourrons coller des fichiers. Le conteneur a un attribut appelé contenteditable défini sur true. L'attribut contenteditable est important pour permettre le collage de fichiers ou de tout autre élément dans le conteneur. Si l'attribut contenteditable est remplacé par false ou supprimé, l'action de collage ne fonctionnera pas comme prévu. Nous avons également un conteneur avec l'identifiant d'aperçu. Nous utiliserons le conteneur d'aperçu pour prévisualiser l'image collée par l'utilisateur.

Ajoutons quelques styles de base à notre balisage à partir de style.css

*{
    font-family: Arial, Helvetica, sans-serif;
}

body{
    text-align: center;
    margin-block-start: 4rem;
}
#pasteArea {
    border: 2px dashed #ccc;
    padding: 20px;
    width: 300px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    margin: auto;
    color: rgb(5, 89, 89);
}

#preview img {
    max-width: 100%;
    margin-top: 10px;
}

Le balisage et la feuille de style ci-dessus créent un simple conteneur bordé de tirets avec un simple texte d'invite, comme indiqué dans la capture d'écran ci-dessous :

Maintenant que nous avons créé l'interface utilisateur, ajoutons quelques fonctionnalités utiles avec JavaScript dans la section suivante.

Le script

Dans cette section, nous utiliserons JavaScript pour ajouter un écouteur d'événement de collage à la zone de collage. Avant d'obtenir la zone de collage du DOM pour attacher l'écouteur d'événement, nous attendons d'abord que le contenu du DOM soit chargé comme dans l'extrait de code ci-dessous.

document.addEventListener('DOMContentLoaded', () => {
    const pasteArea = document.querySelector('#pasteArea');

    pasteArea.addEventListener('paste', (event) => {

    });
});

Dans l'extrait de code ci-dessus, nous avons ajouté un écouteur pour l'événement DOMContentLoaded. Cela nous permet d'attendre que l'arborescence DOM soit créée avant de pouvoir récupérer les éléments DOM. Ensuite, nous sélectionnons le conteneur de la zone de collage et y ajoutons un écouteur d'événement de collage.

Récupérer le fichier à partir des éléments collés

Le gestionnaire d'événements de collage n'a pas été implémenté dans l'extrait de code précédent. Implémentons-le en récupérant les données de l'objet événement et en les enregistrant dans la console. Nous en ferons plus avec les données plus loin dans l'article. Pour l'instant, nous voulons simplement nous assurer que les fichiers sont reçus lorsque les éléments sont collés dans la zone de collage. L'extrait de code ci-dessous montre l'implémentation minimale du gestionnaire d'événements Paste.

pasteArea.addEventListener('paste', (event) => {
        const items = event.clipboardData.items
        for (const item of items) {
            if (item.kind === 'file') {
                const file = item.getAsFile()

                console.log(file)
            }
        }
    })

Dans l'extrait de code ci-dessus, nous obtenons des éléments de l'objet event.clipboardData. event.clipboardData.items est un DataTransferItemList qui est un objet de type liste contenant le contenu des éléments collés. Les éléments sont stockés dans une liste car il est possible pour un utilisateur de copier et coller plusieurs éléments à la fois.

Ensuite, nous parcourons les éléments en utilisant la boucle for ...of. Dans la boucle, on vérifie si chacun des éléments est un fichier. Si l'élément est du « fichier » roi, nous l'obtenons sous forme de fichier et l'imprimons sur la console du navigateur.

Imprimer les informations du fichier sur la console n'est pas très utile aux utilisateurs de votre page web. Faisons quelque chose d'un peu plus intéressant dans la section suivante.

Aperçu du fichier téléchargé

Il serait difficile pour un utilisateur de savoir que le téléchargement du fichier a réussi après avoir collé les éléments du presse-papiers si nous ne l'affichons nulle part. Il est important d'indiquer que le fichier a été téléchargé avec succès en affichant quelque chose qui indique le succès. Quelle meilleure façon d'indiquer le succès d'un téléchargement que d'afficher le fichier téléchargé lui-même ?

Dans cette section, nous allons étendre le gestionnaire d'événements Paste pour créer une URL à partir du fichier reçu. Nous utiliserons l'URL créée pour restituer le fichier une fois qu'il sera chargé dans le navigateur. Nous profiterons de l'API FileReader pour créer une URL à partir du fichier comme codé dans l'extrait ci-dessous.

pasteArea.addEventListener('paste', (event) => {
        const items = event.clipboardData.items
        for (const item of items) {
            if (item.kind === 'file') {
                const file = item.getAsFile()


                const reader = new FileReader();

                reader.onloadend = (e) => {
                    const url = e.target.result
                    console.log(url)

                };
                reader.readAsDataURL(file);
            }
        }
    });

Dans l'extrait de code ci-dessus, nous avons créé une instance de FileReader et l'avons utilisée pour générer l'URL des données. Nous avons également ajouté un écouteur d'événement Loadend à l'objet FileReader où nous enregistrons le résultat de la lecture sur la console. C'est la première étape vers la prévisualisation du fichier, nous pouvons maintenant utiliser l'URL pour afficher le fichier.

En supposant que l'utilisateur a collé les fichiers image, l'extrait de code suivant montre comment nous pouvons étendre le gestionnaire d'événements pour créer une URL et afficher le fichier image.

 reader.onloadend = (e) => {
       const url = e.target.result
       const preview = document.querySelector('#preview')
       const img = document.createElement('img');

       img.src = url;
       preview.appendChild(img);
   };

Dans l'extrait de code ci-dessus, nous récupérons le conteneur d'aperçu du DOM et créons un élément img pour le rendu de l'image. Nous attribuons l'URL créée comme src de l'image et ajoutons l'image au conteneur d'aperçu. Une fois l'image ajoutée au conteneur d'aperçu, l'utilisateur peut désormais savoir que l'image qu'il a collée a été chargée avec succès dans la page Web.

Succès! Nous avons mis en œuvre avec succès le téléchargement de fichiers par copier-coller sur une page Web. Cette méthode de téléchargement de fichiers donne aux utilisateurs le privilège de télécharger facilement des fichiers sans avoir besoin de cliquer sur plusieurs boutons pour sélectionner le fichier à télécharger. L'interface ClipboadEvent offre un moyen simple de collecter des données à partir d'éléments collés sur le navigateur. L'interface FileReader nous permet de créer une URL à partir du fichier téléchargé et de l'utiliser pour prévisualiser le fichier téléchargé.

N'hésitez pas à dire quelque chose dans la section commentaires. Apprenez-en davantage sur les interfaces ClipBoardEvent et FileReader de MDN.