Customiser le bouton parcourir d’envoi de fichier dans un formulaire

Lorsque l'on conçois une charte graphique, et qu'il s'agit de proposer un affichage sympa pour l'utilisateur, concevoir et surtout intégrer un formulaire n'est pas toujours la tache la plus gratifiante. Néamnoins, en connaissant quelques petites astuces on peut finalement trouver à cette tahce un intérêt certain.

Alors faisons la courte, ce post s'adresse plus aux développeurs et intégrateurs qu'aux graphiste ou designer web. Mais pour les personnes en charge de la conception graphique, lachez vous sur les formulaires si l'occasion le permet, un intégrateur compétent devrait y trouver matière à relever le challenge.

Toute cette introduction pour dire quoi ?

Bah un champ de type envoi de fichier ( input type file ) peut être aisément habillé graphiquement avec une toute petite méthode, sans prétention, mais plutôt utile.

Je vous la livre.

De base, on a un :

<input id="" class="" accept="" name="" type="file" />

Le problème est qu'en matière de css, essayer de modifier les propriétés de cet élément est peine perdu.

Donc on ne va pas l'afficher

<input type="file" accept="" name="" class="" id="" style="display: none" />

Vous allez me dire, mais si on ne l'affiche pas, comment peut on alors l'utiliser pour envoyer des fichiers ?
Et la question est pertinente 🙂

La solution, l'intégrer dans une balise label, sémantiquement recommandée, et c'est sur celle ci que l'on va appliquer tous les styles effets / animation / image que l'on veut.

<label for="bouton-fichier" class="label-a-styliser">
<input type="file" accept="" name="" class="" id="bouton-fichier" style="display: none" />
</label>

Et là !! TADAAAA !!!

en ciblant le label via sa classe,
vous pouvez maintenant afficher n'importe quel type de bouton d'ajout de fichier

Bien, jusqu'ici, tou va bien sauf que....
Le nom du fichier qui s'affiche dans le bouton par défaut et qui permet de rassurer l'utilisateur sur le fait qu'il ait bien ajouté un fichier n'apparait plus.
Pas de panique, comme toujours, il existe une solution, et pour ma part, je la nomme javascript

Comment qu'on fait ?
C'est encore très simple.
Javascript nous permet de lancer des instructions lorsque l'on utilise un bouton d'ajout de fichier dans un formulaire.

<script>
// à placer dans les balises <head>
//on regarde si un fichier a été ajouté
document.getElementById("bouton-fichier").onchange = function()
{
//on récupère le nom de celui ci et on l'affiche dans une div ciblée via son ID située dans la page
document.getElementById('nomFichier1').innerHTML = this.value;
}

</script>

Et c'est tout !!!

La méthode est simple, assez rapide et pas très gourmande en ressource, j'espère donc que ça vous aura aidé. Et ne pas oublier qu'en cas de problème, vous pouvez toujours confier à un spécialiste ! 😉