You are currently viewing Transfert Fichier : Comment Envoyer Des Fichiers Depuis Un Site
Transfert Fichier : Comment Envoyer Des Fichiers Depuis Un Site

Transfert Fichier : Comment Envoyer Des Fichiers Depuis Un Site

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 :

Contact form 7 : Ajouter la balise "Fichier"
Contact form 7 : Ajouter la balise "Fichier"
  • 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)

Contact form 7 : paramétrer la balise fichier
Contact form 7 : paramétrer la balise fichier

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 » :

Contact form 7 : Modifier le code court de la balise fichier
Contact form 7 : Modifier le code court de la balise fichier

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… 

Code court de Contact form 7
Code court de Contact form 7

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 :

  1. Survol Extensions.
  2. Ensuite, clique sur Ajouter.
  3. Ecris, « caldera forms ».
  4. Ensuite, clique Installer maintenant.
  5. Puis, sur Activer.
  6. Enfin, clique sur l’onglet Caldera Forms qui vient de s’ajouter. 
Installer et activer Caldera forms
Installer et activer Caldera forms

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 :

Créer un champ avec Caldera forms
Créer un champ avec Caldera forms

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 :

Caldera forms : choisir le champ Fichier
Caldera forms : choisir le champ Fichier

Ensuite, nous allons définir les possibilités de transfert d’un fichier :

  1. Type de champ : Nous allons laisser cela par défaut, puisqu’il s’agit de ce que nous avons sélectionné précédemment.
  2. ID : le plugin en génère un automatiquement, nous n’allons pas nous embrouiller avec lui, laissons comme c’est !
  3. Nom : Tu es obligé de définir un nom, je vais l’appeler « Transfert fichier1 ».
  4. 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.
  5. Slug : Je te conseille de laisser cela par défaut.
  6. Requis : Est-ce que ce champ tu vas le rendre obligatoire ?
  7. Description : Afficher une description sous le champ.
  8. Classe personnaliser : En ajoutant une classe, tu pourras par exemple apporter le même design à toutes les classes du même nom.
  9. 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.
  10. 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).
Paramétrer le champ fichier de Caldera forms
Paramétrer le champ fichier de Caldera forms
Paramétrer le champ fichier de Caldera forms (suite)
Paramétrer le champ fichier de Caldera forms (suite)

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 :

Définir le bouton d'envoi de Caldera forms
Définir le bouton d'envoi de Caldera forms

Enfin, nous allons paramétrer le bouton à soumettre :

  1. Type de champ : Ne change rien, c’est ce que nous avons défini.
  2. ID : Le plus simple est de le laisser par défaut.
  3. Nom : Un bouton sans nom ! tu as déjà vu cela ? C’est rare, je vais l’appeler « Envoyer ».
  4. Classe personnalisée : Si tu souhaites par exemple modifier le design.
  5. Type : Oui, c’est un bouton à Soumettre.
  6. 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 :

Voir le résultat avec Caldera forms
Voir le résultat avec Caldera forms

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 : 

Modifier le formulaire de Caledera forms
Modifier le formulaire de Caledera forms

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) :

Caldera forms : choisir le champ Fichier avancé
Caldera forms : choisir le champ Fichier avancé

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.

Caldera forms : pour télécharger plusieurs fichiers en une fois
Caldera forms : pour télécharger plusieurs fichiers en une fois

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 ?

Si vous avez aimé l'article, vous êtes libre de le partager :-)

Laisser un commentaire