Téléchargement de fichiers dans WordPress, revisité : Partie 1 – Le côté client

Il y a des années, j’ai écrit sur la façon de télécharger des fichiers dans WordPress à partir de la zone administrative. Ce message est pratiquement une mise à jour de ce message, mais il couvre de nouvelles considérations que je fais et d’autres processus que je pense nécessaires.

Pour cet article, je vais travailler sur l’exemple du téléchargement d’un fichier PDF et comment le rendre également disponible dans la médiathèque.

Ce faisant, je prévois également de couvrir certaines considérations à prendre en compte côté client et côté serveur, ainsi que les éléments à rechercher chaque fois que quelqu’un transfère des informations via le réseau.

Téléchargement de fichiers dans WordPress (et dans la médiathèque)

Avant d’en venir à l’essentiel de cet article, je suppose que vous avez :

1. Une page de sous-menu ou une configuration de page d’administration avec une entrée de fichier,
2. Que vous êtes correctement configuré pour accepter les types MIME,
3. Que vous êtes à l’aise avec un peu de JavaScript,
4. Et vous êtes à l’aise avec des messages personnalisés en dehors de l’API WordPress standard.

Si c’est le cas, tout le code devrait être relativement explicite (pas que je ne le décomposerai pas morceau par morceau), mais si l’un des éléments ci-dessus semble déroutant, alors le message peut inclure du matériel qui nécessite un peu plus de recherches dans le Codex ou concernant JavaScript que je fournirai ici.

Quoi qu’il en soit, je ferai ce que je peux pour être aussi complet que possible.

1 L’idée principale

L’idée de la fonctionnalité est simple: vous voulez donner à l’utilisateur la possibilité de télécharger des fichiers PDF via la zone d’administration de WordPress. Vous souhaitez également que le fichier soit disponible dans la médiathèque.

La possibilité de le faire n’est pas difficile, mais il existe des moyens d’améliorer l’expérience de l’utilisateur que j’aimerais également couvrir dans ce post (comme ne pas pouvoir télécharger quoi que ce soit tant que le fichier n’a pas été spécifié dans la zone de saisie, par exemple Exemple).

2 L’interface utilisateur pour vérifier le type de fichier

Tout d’abord, comme je l’ai dit en haut de l’article, je suppose que vous avez jeté les bases de la page d’administration de WordPress. Cela peut être fait de certaines manières – j’ai choisi d’utiliser une page de sous-menu, mais il existe plusieurs façons de le faire.

Deuxièmement, la page est simple : elle comprend le titre de la page, un champ de saisie de fichier et un bouton "Télécharger" qui est désactivé par défaut :

Notez que lorsque j’essaie d’ajouter une image qui n’est pas un PDF, un message d’erreur s’affiche et le bouton "Télécharger" est toujours désactivé :

Mais lorsque j’ajoute un fichier du type attendu, le bouton "Télécharger" est activé :

Cela nécessite quelques éléments :

• JavaScript qui renifle le type de fichier,
• Partials avec une visibilité qui peut être basculée dynamiquement via JavaScript,
• Et la possibilité d’activer ou de désactiver un bouton d’entrée de fichier.

Une remarque importante est que du côté client : nous ne pouvons que supposer que le fichier est le type de fichier approprié en fonction de son extension. Nous devrons faire plus de travail côté serveur pour nous assurer que cela est exact.

Mais le point de vérifier côté client pour s’assurer que nous offrons la meilleure expérience possible grâce aux messages de notification et à l’activation ou à la désactivation des options en fonction du type de fichier.

3 Vérification du type de fichier côté client

Supposons pour cet exemple que nous ayons un partiel qui s’affiche chaque fois que nous tentons de télécharger un fichier qui n’est pas un PDF. Par défaut, le conteneur a un style="display:none ; » attribut que nous manipulerons via JavaScript sous peu :

<?php
/**
 * Displays whenever a person tries to upload a file that isn't a PDF. This is toggled via JavaScript.
 */
?>

<div id="invalid-file-message" class="error notice is-dismissible" style="display:none;">
    <p>You have attempted to upload an invalid file type.</p>
    <button type="button" class="notice-dismiss">
        <span class="screen-reader-text">Dismiss this notice.</span>
    </button>
</div><!-- #invalid-file-message -->

Notez que ce partiel a un ID invalid-file-message. C’est un peu généralisé car vous voudrez peut-être le préfixer avec quelque chose d’autre, mais pour les besoins de cet article, vous avez l’idée.

Pour basculer la visibilité de ce message, vous devez configurer un gestionnaire en JavaScript pour surveiller le changement dans l’élément d’entrée du fichier.

4 Surveillance de l’élément d’entrée de fichier

À ce stade, il doit y avoir un fichier JavaScript qui surveille la valeur de l’événement de modification de l’élément d’entrée de fichier afin qu’il puisse déterminer la marche à suivre.

Jetez un oeil à ce code:

Ce code recherchera la valeur du champ de saisie. Si le type de fichier ne correspond pas à pdf, la visibilité du message d’erreur ci-dessus sera modifiée ; sinon, il affichera le bouton de téléchargement.

Et rappelez-vous, c’est une bonne pratique de mettre ce script en file d’attente uniquement dans la zone d’administration et sur la page où il est obligatoire :

<?php

public function enqueue()
{
    if (!is_admin() 'acme-upload-pdf' !== get_current_screen()->id) {
        return;
    }

    wp_enqueue_script(
        'acme-upload-pdf-admin',
        $this->pluginUrl. 'assets/scripts/admin.js',
        ['jquery'],
    );
}

Tout cela garantira que votre plugin enregistre correctement le script sur la page sur laquelle il est nécessaire, nulle part ailleurs, et qu’il vérifie correctement pour s’assurer que le fichier spécifié est du bon type.

Mais il y a plus

À l’origine, il s’agissait d’un seul article, mais la quantité de contenu nécessaire pour tout exiger prendrait trop de temps à passer au crible (du moins, à mon avis). J’essaie donc de le rendre un peu plus facile à suivre en le divisant en quelques messages.

Comme mentionné précédemment, nous ne pouvons pas faire grand-chose côté client. Bien sûr, weUplo peut prendre des mesures pour améliorer l’expérience utilisateur, mais ce n’est pas la plus sécurisée et il reste encore du travail à faire côté serveur.

Dans la seconde moitié de cette série, j’examinerai le PHP requis pour gérer le téléchargement de fichiers et le faire en toute sécurité.