Transfert fichier : Comment les visiteurs de ton site peuvent-ils t’envoyer des fichiers en toute sécurité ? Pour aller plus loin, il est même possible d’envoyer plusieurs fichiers en une seule fois. C’est ce que nous allons voir dans ce tutoriel. De plus, nous allons également sécuriser cette partie.
Transfert de fichier sécurisé gratuit
Tu ne sais jamais qui consulte ton site Web, cette personne est-elle malveillante ? Ou est-elle là juste pour trouver des renseignements… Bref, c’est compliqué de faire confiance. En revanche, ce que tu peux faire si cette personne est mal intentionnée, c’est de lui barrer le chemin au maximum, sans pénaliser les autres utilisateurs.
D’ailleurs, si tu souhaites qu’un utilisateur puisse te transférer des fichiers, il faudra te protéger, car c’est une faille de sécurité. Mais ne t’inquiète pas, nous allons voir comment faire.
Transfert fichier : Quel format de fichiers
Pour permettre l’envoi d’un fichier sur ton site, il faudra que tu définisses quelles extensions tu autorises. Vas-tu autoriser une extension « .jpg », « exe », « pdf »…
Parmi les trois que j’ai cité plus haut, l’une peut être dangereuse justement. Il s’agit de l’extension .exe. En effet, il s’agit d’une extension qui permet d’installer un logiciel, dont un logiciel malveillant. D’ailleurs, quel intérêt d’envoyer un fichier « .exe » ?
Généralement, les transferts de fichiers se font pour :
- jpg : Image
- png : Image
- gif : Image animée
- mp3 : musique
- pdf : Documentation
- mp4 : Vidéo
Bref, si tu souhaites recevoir un format image, tu vas par exemple juste autoriser « jpg » et « png ». « mp4 » n’aura aucun intérêt d’être autorisé.
Transfert fichier : Quel taille fichiers
Autre point auquel tu peux augmenter la sécurité des transferts de fichiers, il s’agit de la taille. Eh oui, si tu souhaites que l’on te transfert des fichiers « pdf », il n’y a aucune raison d’autoriser plus de 1 Mo, et encore, avec 1 Mo je reste généreux.
D’ailleurs, si tu ne mets pas tes limites, ton serveur risque de ne pas être content si l’utilisateur t’envoie un fichier trop lourd.
En paramétrant, tu vas définir la taille maximum que tu autorises lors du transfert de fichiers.
Transférer fichier : avec Contact Form 7
Si tu souhaites transférer un fichier avec « Contact Form 7 » et que tu ne l’as pas encore installé, tu peux voir l’article : Comment utiliser le captcha sur WordPress.
Pour commencer, nous allons soit utiliser le formulaire par défaut, soit en créer un nouveau.
Ensuite, tu pourras effacer tous champs sauf le bouton envoyer. Ben oui, sinon comment veux-tu que l’utilisateur t’envoie le fichier si l’on ne met pas le bouton d’envoi. 😉
Transfert fichier : Créer le bouton et le paramètrer
Tout d’abord, clique sur le bouton fichier, là tu vas pouvoir régler les paramètres :
- Type de champ : si tu coches cette case, l’internaute sera obligé de t’envoyer le fichier.
- Nom : tu peux laisser par défaut.
- Limite de taille maximale (bytes) : C’est ce que je te disais plus haut, il s’agit de la limite d’envoi possible du fichier, pour éviter d’éventuels problèmes. Si tu as du mal à comprendre « bytes », plus bas je t’ai mis quelques conversions. Je vais mettre 1 000 000, car je souhaite que l’utilisateur m’envoie une image.
- Formats de fichiers : Tu vas pouvoir définir quel type de fichier l’utilisateur pourra t’envoyer. Je vais mettre « jpg » espace et « png », ce sont tous les deux des extensions d’images.
- Attribut «id» : Si tu définis un id, tu pourras modifier ce champ par exemple avec le CSS.
- Attribut «class» : Tu pourras également faire des modifications de style, mais cette fois en définissant plusieurs éléments.
Enfin, tu peux voir le code court de notre champ « fichier », avec les paramètres que nous avons prédéfinis.
N’oublie pas de cliquer sur le bouton Insérer la balise.
1 000 000 (Ko) = 1 Mégabyte (Mo)
1 000 000 000 (Ko) = 1 Gygabyte (Go)
Modifier les paramètres après la création de champ fichier
Tout d’abord, tu peux faire des modifications directement dans le short code si tu le souhaites.
Par exemple, je souhaite également autoriser les fichiers « pdf », à la suite je vais mettre la barre verticale (altgr+6), puis écrire « pdf » :
Bien sûr, tu peux faire d’autres modifications si tu le souhaites, comme modifier le poids…
Mettre le champ fichier sur le site Web
Tout d’abord, n’oublie pas d’enregistrer ce que tu viens de faire, puis tu pourras utiliser le code court qui est placé sous le titre.
Tu peux mettre ce short code sur une page, un article, sur la barre latérale…
Transfert fichier : Utiliser Caldera Forms
Tout d’abord, je vais te présenter un autre plugin, si jamais tu ne souhaites pas utiliser « Contact Form 7 ». Il s’agit de Caldera Forms, avec ce plugin, tu ne verras pas le code, nous allons tout glisser-déposer.
Caldera Forms : installer et activer
Pour commencer, nous allons télécharger l’extension :
- Survol Extensions.
- Ensuite, clique sur Ajouter.
- Ecris, « caldera forms ».
- Ensuite, clique Installer maintenant.
- Puis, sur Activer.
- Enfin, clique sur l’onglet Caldera Forms qui vient de s’ajouter.
On remarque que le plugin est populaire avec deux cent mille d’installations, il a également quatre étoiles sur cinq pour quatre cent vingt votants. Dans mon cas, il a été mis à jour il y a cinq mois et n’a pas été testé sur ma version : cela est moins top.
Caldera Forms : créer le premier formulaire
Là, il suffit de cliquer sur un bouton : Nouveau formulaire. Ensuite, le plugin de propose plusieurs possibilités, avec des formulaires préremplis, nous allons choisir Formulaire vide.
Puis, nous allons donner un titre à notre formulaire, je vais l’appeler « Transfert fichier ». Enfin, fais un clique sur Créer un formulaire.
Caldera Forms : créer le premier champ
Maintenant, tu vas glisser-déposer le bouton Ajouter un champ dans le rectangle blanc :
Là, « Caldera forms » voudra savoir quel type de champ tu souhaites utiliser, clique sur Fichier dans le menu de gauche, puis clique sur Définir le champ à la ligne Fichier :
Ensuite, nous allons définir les possibilités de transfert d’un fichier :
- Type de champ : Nous allons laisser cela par défaut, puisqu’il s’agit de ce que nous avons sélectionné précédemment.
- ID : le plugin en génère un automatiquement, nous n’allons pas nous embrouiller avec lui, laissons comme c’est !
- Nom : Tu es obligé de définir un nom, je vais l’appeler « Transfert fichier1 ».
- Masquer le titre : Autant nous sommes obligés de donner un nom à notre champ, autant, nous ne sommes pas obligés de l’afficher, c’est vrai qu’un nom n’est pas toujours utile pour transférer des fichiers.
- Slug : Je te conseille de laisser cela par défaut.
- Requis : Est-ce que ce champ tu vas le rendre obligatoire ?
- Description : Afficher une description sous le champ.
- Classe personnaliser : En ajoutant une classe, tu pourras par exemple apporter le même design à toutes les classes du même nom.
- Type autorisés : Comme avec Contact Form 7, il est conseillé de définir le type de fichier que l’utilisateur peut t’envoyer pour des raisons de sécurités. Dans mon cas je souhaite que l’utilisateur puisse envoyer uniquement des images, donc je vais mettre png, jpg.
- Taille maximale d’envoi : Limite le poids du fichier que l’utilisateur peut t’envoyer, pour qu’il ne puisse pas faire exploser ton serveur. Pour une simple image 1mo suffit, je vais écrire 1 000 000 (égal 1 mo en octets).
Un bouton pour envoyer transférer le fichier
Enfin, il nous manque plus qu’une seule chose, tu l’as devinée, notre bouton d’envoi. Pour ce faire, fais un glisser-déposer du bouton Ajouter un champ sous bouton que nous venons de créer. Puis, sélectionne Bouton :
Enfin, nous allons paramétrer le bouton à soumettre :
- Type de champ : Ne change rien, c’est ce que nous avons défini.
- ID : Le plus simple est de le laisser par défaut.
- Nom : Un bouton sans nom ! tu as déjà vu cela ? C’est rare, je vais l’appeler « Envoyer ».
- Classe personnalisée : Si tu souhaites par exemple modifier le design.
- Type : Oui, c’est un bouton à Soumettre.
- Ajouter un espace au-dessus du libellé : c’est toi qui vois 😉.
N’oublie pas de cliquer sur le bouton Save form une fois que tu as fini.
Voir le résultat
Tout d’abord, tu peux voir le résultat en cliquant sur le bouton Prévisualiser le formulaire, en haut de la page.
Sinon, tu peux aussi insérer le tableau dans une page, un article, dans la barre latérale ou ailleurs, via un code court. Le short code se trouve dans le menu administrateur WordPress CalderaForms -> Formulaires. Enfin, clique sur Obtenir le code court :
Glisser-déposer les fichiers à transférer
Par ailleurs, il est possible de transférer des fichiers avec Caldera Forms. D’ailleurs, le bouton par défaut sera d’un meilleur design. Pour ce faire, à Caldera Forms -> Formulaires, clique sur Nouveau formulaire pour en créer un nouveau tu t’en doutes, ou sur Modifier, pour modifier le formulaire :
Ensuite, glisse et dépose le bouton Ajouter un champ, dans le rectangle blanc. Puis, dans le module Fichier sélectionne Outil de téléversement de fichier avancé (2.0) :
Pour remplir les paramètres de ce nouveau champ, tu pourras te référer à la partie « Caldera Forms : créer le premier champ ». Néanmoins, je souhaite te montrer quelque chose en plus !
Dans les réglages de ce champ, tu trouves une case à cocher qui s’appelle « Ajouter à la bibliothèque de média », en l’activant, l’utilisateur pourra drag and dropper plusieurs fichiers en une fois avant d’envoyer. Cela peut rendre ton site beaucoup plus ergonomique, mais attention tout de même de limiter le poids des fichiers.
Ce qu'il faut retenir
Une fois de plus avec WordPress, pour transférer un fichier nous n’avons pas besoin d’avoir des connaissances avec PHP. Tu peux par exemple utiliser le plugin « Contact Form 7 », avec le bouton « Fichier » pour offrir au visiteur de ton site la possibilité de t’envoyer un fichier. Mais, tu peux également utiliser l’extension Caldera Forms, là, tu pourras aller plus loin encore, par exemple, en offrant la possibilité à l’utilisateur de t’envoyer plus de fichiers en une fois. Attention quand même de limiter le poids des fichiers, ainsi que le type de fichier, afin que ton site Web fonctionne au mieux.
Parmi ces deux extensions, laquelle tu préfères ?
