Tuto: Personnaliser un champ d’envoi d’images

Les champs d'envoi de fichiers input[type='file'] font partie de ces oubliés du CSS, tristement non personnalisables. Est-ce une raison pour garder des champs d'envoi tout moche ? Pas quand il existe des moyens détournés de leur donner le design de notre choix !

Je vous propose aujourd'hui un petit tutoriel vous permettant de personnaliser vos inputs files pour qu'ils puissent prévisualiser l'image sélectionnée, ce qui est beaucoup plus logique et parlant qu'un nom de fichier. 

Un premier clic sur l'uploader vous proposera d'envoyer votre fichier, un second vous permettra de supprimer l'image préexistante ou d'annuler un envoi. De plus, cela fonctionne avec tous les types d'images, y compris les gifs !

Personnaliser un champ d'envoi d'images

Comme pour tous les articles de tuto récents que j'ai réalisé, je vous invite à vous rendre sur CodePen pour retrouver le code ainsi que les commentaires qui vous permettront de le comprendre ! Si votre but est simplement de le copier/coller sur vos projets, faites attention à ne prendre que la 2e partie du CSS, la première n'est là que pour la présentation.

See the Pen Tuto: Personnaliser un champ d'envoi d'images by Benjamin SANCHEZ (@B_Sanchez) on CodePen.