Les champs d'envoi de fichiers semblent simples. Un bouton « Choisir un fichier » et un formulaire qui envoie les données. Mais l'envoi d'un fichier est un moment à fort enjeu. La personne vous confie son CV, son document fiscal, la photo de son produit. Si l'envoi paraît flou, lourd ou raté, elle abandonne le formulaire. Si elle ne sait pas quels types de fichiers vous acceptez ni quelle taille ils peuvent avoir, elle perdra du temps à envoyer le mauvais fichier pour s'entendre dire que cela a échoué. Si l'envoi paraît peu sûr, elle doutera de la fiabilité de votre site. Cet article explique ce qui fait fonctionner un champ d'envoi de fichiers, comment protéger l'utilisateur comme votre site, et ce que la plupart des formulaires font mal et qui empêche d'aller jusqu'au bout.
Un champ d'envoi de fichiers fait plus qu'accepter des fichiers. Il recueille aussi des informations sur les autorisations. Une personne qui envoie un CV dit « voici mes informations, utilisez-les pour le recrutement ». Une personne qui envoie un document dit « je vous fais confiance pour cela ». Le champ d'envoi doit dire clairement ce que vous ferez du fichier, pourquoi vous en avez besoin, et qu'il est sûr de l'envoyer.
Pourquoi l'envoi de fichiers diffère des autres champs de formulaire
Un champ de texte accepte des mots. Un champ e-mail accepte une adresse e-mail. Un champ d'envoi de fichiers accepte des fichiers de toute taille, de tout type et de toute origine. L'envoi de fichiers diffère donc fondamentalement des autres champs sur trois points.
D'abord, l'envoi de fichiers comporte un risque de sécurité. Un fichier malveillant envoyé sur votre serveur peut endommager votre site, voler des données ou infecter les appareils de vos visiteurs. Les champs de texte et d'e-mail ont des limites claires. Les envois de fichiers n'en ont pas. Une personne pourrait envoyer un exécutable déguisé, un script ou un logiciel malveillant. Vous devez donc valider et protéger chaque envoi qui arrive.
Ensuite, l'envoi de fichiers demande un contexte clair. La personne doit savoir quel fichier envoyer avant de commencer à chercher sur son ordinateur. Un champ e-mail se comprend de lui-même. Un champ d'envoi de fichiers doit dire « Envoyez votre CV au format PDF ou Word, 5 Mo maximum ». Sans cette clarté, les gens passent des minutes à trouver un fichier pour découvrir qu'il a le mauvais format ou qu'il est trop lourd.
Enfin, l'envoi de fichiers est lent. Envoyer un fichier de 10 Mo depuis un téléphone en 4G prend du temps. La personne attend. Elle doit savoir que l'envoi est en cours et qu'il n'est ni bloqué ni figé. Un état de chargement et un indicateur de progression sont indispensables.
Le champ d'envoi lui-même et son libellé
Le champ d'envoi est le bouton sur lequel les gens cliquent pour choisir un fichier. Le texte du bouton compte. Il doit dire ce qui se passe ensuite.
« Choisir un fichier » est vague. « Parcourir les fichiers » est mieux. « Envoyer votre CV » est le meilleur. Le texte du bouton doit nommer le fichier précis que vous voulez. Cela indique exactement à la personne ce qu'elle doit chercher sur son ordinateur.
Le libellé au-dessus du bouton doit rappeler l'exigence. « CV (PDF ou Word, 5 Mo maximum) ». Placez la limite de taille et les formats acceptés directement sous le libellé. Ne cachez pas cette information derrière une icône d'aide ou dans un petit texte gris. Les gens doivent la voir tout de suite, sinon ils ne sauront pas quoi envoyer.
Si votre formulaire accepte plusieurs fichiers, le bouton doit dire « Ajouter des fichiers » ou « Envoyer plusieurs fichiers ». Un champ conçu pour un seul fichier qui accepte soudain deux fichiers déroute les gens. Soyez explicite.
Si l'envoi est facultatif, dites-le. « Portfolio (facultatif, JPG ou PNG, 20 Mo maximum par image) ». Si l'envoi est obligatoire, le libellé doit dire « obligatoire » ou comporter un astérisque. Ne supposez pas que les gens comprennent.
Les types de fichiers acceptés et comment les communiquer clairement
Vous ne pouvez pas accepter tous les types de fichiers. Votre formulaire de CV n'a pas besoin de photos JPEG. Votre formulaire de documents n'a pas besoin de fichiers vidéo. Vous devez préciser exactement les types acceptés.
N'utilisez pas de jargon technique. Ne dites pas « types MIME » ni « extensions de fichier ». Dites « PDF, documents Word ou exports Google Docs ». Dites « photos JPG ou PNG ». Dites « feuilles de calcul ». Utilisez les noms que les gens comprennent.
Quand une personne envoie un fichier dans le mauvais format, l'erreur doit être précise. Pas « Type de fichier invalide ». Plutôt : « Ce formulaire accepte les documents PDF ou Word. Veuillez convertir votre fichier et réessayer. » Dites ce qui s'est passé et ce qu'il faut faire.
Si votre formulaire a besoin de plusieurs types de fichiers pour différents champs, rendez chacun clair. Une candidature peut demander un CV en PDF et une lettre de motivation en Word. Chaque champ doit avoir son propre bouton et ses propres types acceptés. Ne laissez pas les gens deviner quel fichier va où.
Faites une liste blanche de vos types de fichiers, jamais une liste noire. Ne dites pas « tous les types de fichiers sauf les exécutables ». Dites exactement quels types sont autorisés. Une liste blanche est plus simple pour les utilisateurs et plus solide pour la sécurité.
Les limites de taille de fichier et comment les gérer
Chaque champ d'envoi de fichiers a besoin d'une taille maximale. Sans elle, une personne pourrait envoyer une vidéo de 500 Mo par erreur, et votre serveur pourrait planter ou manquer d'espace.
La limite doit correspondre à ce que les gens utilisent vraiment. Un CV pèse en général 1 à 3 Mo. Fixez la limite à 10 Mo pour garder de la marge. Une photo de profil pèse 2 à 5 Mo. Fixez la limite à 20 Mo. Un extrait vidéo peut peser 50 à 500 Mo. Fixez la limite selon ce dont vous avez vraiment besoin.
Indiquez la limite de taille avant l'envoi. « La taille maximale est de 5 Mo. » Placez-la juste à côté du bouton. Si quelqu'un envoie un fichier trop lourd, l'erreur doit être immédiate et claire. Pas un indicateur qui tourne 30 secondes avant d'échouer. Affichez l'erreur dès la sélection du fichier, avant le début de l'envoi.
Si vous acceptez de gros fichiers, envisagez les envois par lots ou les envois reprenables. Si un fichier de 100 Mo échoue en cours de route, l'envoi reprenable permet de continuer là où il s'est arrêté au lieu de tout recommencer. Cela évite la frustration sur les connexions lentes.
Glisser-déposer et autres méthodes de sélection
Les champs d'envoi de fichiers doivent permettre plusieurs façons de choisir des fichiers. Certains cliquent sur le bouton. D'autres glissent des fichiers depuis leur bureau. D'autres parcourent la photothèque de leur téléphone. Vous devez toutes les prendre en charge.
Le bouton est la méthode principale. Il ouvre le navigateur de fichiers natif, qui fonctionne sur tous les appareils et tous les navigateurs.
Le glisser-déposer est la méthode secondaire. Une personne doit pouvoir glisser un fichier depuis son bureau et le déposer dans la zone d'envoi. C'est plus rapide et plus intuitif que de cliquer sur un bouton et d'attendre l'ouverture du navigateur de fichiers. Affichez un repère visuel clair quand quelqu'un fait glisser un fichier au-dessus de la zone de dépôt. La zone doit s'illuminer, changer de couleur ou afficher une bordure en pointillés. Cela indique qu'on peut déposer le fichier ici.
Sur mobile, la sélection de fichiers fonctionne autrement. La personne touche le bouton et choisit entre sa photothèque, son application de fichiers ou la prise d'une nouvelle photo. Prenez en charge tout ce qui fonctionne sur son appareil. Ne limitez pas les utilisateurs mobiles au simple clic.
Si votre formulaire accepte plusieurs fichiers, autorisez la sélection groupée comme l'ajout individuel. Laissez les gens choisir cinq fichiers d'un coup dans le navigateur de fichiers. Laissez-les aussi en ajouter un de plus ensuite. Ne forcez pas toute la sélection à se faire dans une seule fenêtre.
Montrer ce qui a été envoyé et permettre de retirer des fichiers
Après la sélection d'un fichier, montrez exactement ce qui a été envoyé. Affichez le nom du fichier, sa taille et une petite icône indiquant son type. Cela confirme que le bon fichier a été choisi.
Si le formulaire accepte plusieurs fichiers, montrez-les tous dans une liste. Laissez les gens voir ce qu'ils vont envoyer. S'ils ont choisi le mauvais fichier, laissez-les le retirer et en envoyer un autre avant l'envoi du formulaire.
Le bouton de retrait doit dire « Retirer » ou afficher une icône X. Un clic doit supprimer ce fichier de la liste d'envoi. Il ne doit pas supprimer le fichier de l'ordinateur, seulement du formulaire.
Si quelqu'un doit remplacer un fichier, ne l'obligez pas à le retirer puis à le renvoyer. Laissez-le cliquer sur le bouton de retrait puis sur le bouton d'envoi dans un seul enchaînement. Ou permettez de cliquer sur le fichier pour ouvrir le navigateur et choisir directement un fichier de remplacement. Moins d'étapes veut dire plus de formulaires terminés.
Indication de progression et ce qu'il faut montrer pendant l'envoi
L'envoi de fichiers prend du temps. Pendant ce temps, la personne attend et se demande si quelque chose se passe. Vous devez lui montrer la progression.
Une barre de progression est l'option la plus claire. Elle montre un pourcentage d'avancement. 25 %. 50 %. 75 %. Terminé. La personne la voit avancer et sait que l'envoi est en cours. Une barre qui saute de 0 % à 100 % instantanément n'aide pas. Montrez une progression fluide.
Si vous ne pouvez pas afficher un pourcentage exact, montrez un indicateur qui tourne ou une animation de chargement. Quelque chose qui bouge et montre une activité. N'affichez pas un état de chargement statique sans mouvement. Un chargement statique paraît figé.
Ne laissez jamais le bouton d'envoi cliquable pendant qu'un fichier est en cours d'envoi. Grisez-le ou désactivez-le. Ne laissez pas les gens cliquer plusieurs fois sur envoyer pendant le transfert d'un fichier. Cela peut provoquer des doublons ou des erreurs.
Si l'envoi dure plus de trois secondes, montrez une estimation du temps restant. « Envoi en cours. Environ 30 secondes restantes. » ou « Envoi en cours. Fichier volumineux. » Ne laissez pas les gens se demander combien de temps cela va encore durer.
Gestion des erreurs et pourquoi les erreurs vagues font chuter les formulaires terminés
Les erreurs d'envoi arrivent. Un fichier est corrompu. Une connexion réseau tombe. Un fichier est trop lourd. Un format non pris en charge a été envoyé. Quand une erreur survient, votre message décide si la personne la corrige ou abandonne le formulaire.
Une erreur vague comme « Échec de l'envoi. Veuillez réessayer. » ne dit rien. Réessayer quoi ? Qu'est-ce qui s'est mal passé ? Le fichier est-il corrompu ? Le réseau est-il coupé ? Le type de fichier est-il mauvais ? Les erreurs vagues donnent aux gens un sentiment d'impuissance.
Une erreur précise nomme le problème. « Ce fichier est trop lourd. Votre fichier fait 25 Mo. Le maximum est de 10 Mo. Veuillez le compresser ou choisir un fichier plus léger. » « Ce format de fichier n'est pas pris en charge. Ce formulaire accepte uniquement les documents PDF et Word. Veuillez convertir votre fichier en PDF et réessayer. »
Affichez l'erreur à un endroit bien visible. Pas cachée en petit texte gris en bas du formulaire. Utilisez un fond rouge, une bordure rouge ou une icône rouge. Attirez l'attention pour que la personne voie l'erreur tout de suite.
Ne supprimez pas le fichier de la liste d'envoi quand une erreur survient. Gardez-le visible pour que la personne sache quel fichier a posé problème. Laissez-la le corriger sur place ou le remplacer.
Sécurité et protection de l'utilisateur comme du site
L'envoi de fichiers est un point faible en sécurité. Une personne qui envoie un fichier contenant du code caché pourrait endommager votre serveur. Un mauvais système d'envoi pourrait exposer le fichier à d'autres utilisateurs ou à des attaquants.
La première mesure de sécurité est de valider le type de fichier. Ne faites pas confiance à l'extension du fichier. Un fichier appelé « cv.pdf » peut en réalité contenir du code exécutable. Vérifiez le contenu du fichier, pas seulement son nom. C'est la validation du type MIME. Le serveur lit le contenu réel du fichier et confirme qu'il s'agit bien d'un PDF, bien d'une image, selon ce que vous attendez.
La deuxième mesure est de renommer le fichier après l'envoi. Ne stockez pas les fichiers avec les noms donnés par les utilisateurs. Renommez-les automatiquement. « cv.pdf » devient « envoi-a4f9e2k1.pdf » sur votre serveur. Cela empêche de deviner le chemin du fichier pour y accéder directement, ou d'essayer d'exécuter du code en envoyant un fichier avec un nom précis.
La troisième mesure est de stocker les fichiers en dehors du répertoire web. Ne placez pas les fichiers envoyés dans un dossier directement accessible sur Internet. Stockez-les séparément. Quand quelqu'un doit télécharger son fichier, envoyez-le par un lien sécurisé qui expire, pas par une adresse directe vers le chemin du fichier.
La quatrième mesure est de fixer une taille maximale et des limites d'envoi. Limitez la taille totale de chaque fichier. Limitez le nombre de fichiers qu'une personne peut envoyer. Limitez le nombre d'envois qu'une seule personne peut faire en une heure. Ces limites préviennent les abus et protègent votre serveur.
La cinquième mesure est d'exiger une authentification. Si votre formulaire n'est pas public, demandez aux utilisateurs de se connecter avant d'envoyer des fichiers. Cela empêche n'importe qui sur Internet d'envoyer des fichiers malveillants vers votre serveur.
La sixième mesure est d'utiliser HTTPS. Chaque envoi de fichier doit être chiffré pendant le transfert. Si vous envoyez un fichier en HTTP simple, un attaquant présent sur le réseau pourrait l'intercepter. Utilisez toujours HTTPS pour tout formulaire qui comprend des envois de fichiers.
Comment WEMASY vous aide à créer des formulaires d'envoi de fichiers sécurisés
Le créateur de formulaires de WEMASY inclut des champs d'envoi de fichiers avec des fonctions de sécurité et d'expérience utilisateur intégrées. Vous pouvez définir les types de fichiers acceptés, les tailles maximales, et si l'envoi est obligatoire ou facultatif, sans écrire de code. Le créateur de formulaires valide les types de fichiers côté client et côté serveur pour empêcher les envois malveillants.
Les envois par les formulaires WEMASY utilisent un chiffrement HTTPS sécurisé. Les fichiers sont stockés en dehors du répertoire de votre site et fournis par des liens de téléchargement sécurisés qui expirent. Vous n'avez pas à construire cette infrastructure vous-même.
L'interface d'envoi intègre le glisser-déposer, l'aperçu des fichiers, la gestion des erreurs et l'indication de progression. Les formulaires montrent automatiquement aux utilisateurs quels types de fichiers sont acceptés et quelles sont les limites de taille. Les envois depuis mobile et ordinateur sont pris en charge.
Vous pouvez personnaliser le texte du bouton, les types de fichiers acceptés et les limites de taille selon les besoins de votre formulaire. Découvrez les fonctions de formulaires incluses dans votre offre WEMASY.