9 extraits de champ de téléchargement de fichiers Open Source personnalisés

Vous pouvez trouver des outils incroyables pour améliorer les formulaires Web, allant des kits d'interface utilisateur aux plugins jQuery avancés.

Mais l'un des champs de saisie les plus difficiles à modifier est le champ de téléchargement. Il s'agit d'un élément d'entrée HTML par défaut et il permet aux utilisateurs de télécharger des fichiers depuis leur ordinateur. Relooker le champ de téléchargement est un énorme défi par rapport aux autres éléments de formulaire.

Si vous espérez personnaliser vos entrées de téléchargement, cette galerie vous aidera. J'ai collecté 9 champs de téléchargement faits à la main à partir de CodePen qui prouvent que vous pouvez relooker le champ pour qu'il ressemble à ce que vous voulez.

1. Téléchargement de fichier plat

Le développeur Wallace Erick a créé ce champ de téléchargement plat avec juste un peu de CSS et de JavaScript. Il emprunte à la tendance du design plat, qui évite les dégradés en se concentrant sur des couleurs uniques – souvent avec une palette de couleurs monochromes.

Vous pouvez ajouter cette conception de téléchargement de fichier sur n'importe quelle page et la rendre superbe. Tout ce que vous aurez à faire est de changer le jeu de couleurs et de le positionner correctement dans votre formulaire.

Cela fonctionne exactement comme prévu et s'exécute sur l'élément d'entrée HTML standard. Cela est donc également utilisable avec les anciens navigateurs et devrait également fonctionner sur mobile.

2. Téléchargement de fichiers personnalisés

Voici un design qui devient un peu plus abstrait avec le champ de téléchargement. Le développeur Aaron Vanston a créé ce téléchargement de fichier comme une réplique de ceux que nous voyons sur les sites Web plus importants.

Pensez aux grands sites technologiques comme Dropbox, Google+ et Facebook. Ils ont souvent une zone de glisser-déposer avec un grand espace "cliquez ici" pour lancer la fenêtre de téléchargement. C'est exactement ce qu'Aaron a fait avec cet extrait.

Il s'appuie sur jQuery et une bonne quantité de JS/CSS pour fonctionner. Et bien qu'il utilise le champ de saisie HTML standard, il gère également le processus de téléchargement avec des fonctions JS personnalisées.

Si vous maîtrisez JavaScript, cela peut servir de modèle pratique pour créer votre propre interface utilisateur de téléchargement de fichiers.

3. Téléchargeur animé réactif

Si vous faites n'importe quelle sorte de conception de sites Web modernes, vous savez que vous devez être réactif. Les utilisateurs mobiles peuvent télécharger des fichiers sur le Web via ces mêmes formulaires. L'utilisation d'un champ de saisie réactif est donc une excellente idée.

Jetez un œil à cette conception pour un exemple de champ de téléchargement de qualité adapté aux mobiles. C'est très basique, avec juste un petit espace de téléchargement carré avec prise en charge du glisser-déposer.

Notez simplement que cela n'utilise pas l'élément d'entrée - il n'y a donc aucun moyen de cliquer pour télécharger. Je pense que c'est un cauchemar d'utilisabilité, mais ce n'est aussi qu'un extrait d'échantillon utilisé pour les tests - il n'est donc pas orienté vers une utilisabilité parfaite.

Si vous apportez cet extrait sur votre site, il est recommandé d'ajouter un champ de téléchargement typique à côté de la zone de glisser-déposer.

4. Téléchargeur personnalisé

Les projets de développement quotidiens sont un excellent moyen d'aiguiser vos compétences. Drew Vosburg a suivi cette approche pour créer un joli formulaire de téléchargement hébergé gratuitement sur CodePen.

Il est fortement personnalisé avec des fonctions JavaScript gérant l'effet glisser-déposer. Mais ce champ de saisie est en fait conçu pour prendre en charge à la fois le toucher et le clic, ainsi que le glisser-déposer.

La zone cliquable est une étiquette HTML stylisée avec CSS. Cet élément d'étiquette est attaché au champ de saisie, qui est caché hors de la page. Cela fonctionne exactement comme un champ cliquable. Certainement une idée intelligente et c'est entièrement sémantique pour démarrer.

5. Interface de téléchargement de photos

Voici l'un des extraits les plus complexes et les plus impressionnants que j'ai vus sur CodePen. Il vous permet de télécharger des photos dans une galerie directement depuis votre ordinateur. Avec chaque photo que vous téléchargez, il vous montrera un aperçu directement sur la page.

Cela fonctionne en extrayant des images via JavaScript, puis en les convertissant en base64 pour les intégrer dans CSS.

Chaque fois que vous téléchargez des images sur un serveur, elles génèrent un fichier temporaire. Sur votre propre serveur, vous pouvez utiliser ce fichier temporaire pour afficher l'image. Mais maintenant que CSS prend en charge base64, c'est une autre alternative.

L'interface est super propre et la fonction de téléchargement s'intègre parfaitement.

6. Interface utilisateur de téléchargement bleue simple

Si vous recherchez un champ de téléchargement sans JS, jetez un œil à cet exemple, créé par Stephen Baker.

Il utilise du CSS3 pur pour changer le style de saisie en un seul gros bouton. Il fonctionne avec l'icône de téléchargement de Font Awesome et enveloppe simplement une zone circulaire entière autour du champ de téléchargement.

Vous pouvez modifier le style, la couleur, l'icône ou toute autre chose pour que cela corresponde à votre site. C'est fondamentalement une alternative super propre au style de saisie par défaut et il fonctionne sur du CSS3 pur.

7. Entrée de téléchargement de fichier personnalisé jQuery

Le développeur Terry Young a pris un peu de jQuery et l'a utilisé pour améliorer certains champs de téléchargement existants. Voilà le résultat (et c'est un sacré résultat, si je puis dire).

Grâce à ces styles, vous pouvez modifier le texte du champ de téléchargement, la taille, la couleur du bouton ou supprimer le champ de texte pour n'utiliser qu'un seul bouton.

Notez que cela nécessite une bonne quantité de jQuery car la plupart de ces fonctionnalités ne peuvent pas être modifiées avec CSS. Si cela ne vous dérange pas de travailler avec jQuery, ces options sont phénoménales.

8. Fichier d'entrée plat de l'interface utilisateur

Voici un champ de téléchargement plat légèrement différent créé par Geoffrey Crofte. Celui-ci s'appuie également sur du JavaScript, mais stylise l'intégralité de l'entrée avec des propriétés CSS3.

Comme il s'agit d'un exemple d'extrait, vous ne pouvez pas réellement télécharger de fichiers n'importe où. Mais c'est assez facile à changer si vous déplacez cela dans votre propre site. La conception et la configuration de base sont vraiment ce qui donne de la vie à cet extrait.

La fonction de retour s'exécute en JavaScript, c'est donc là que vous gérez les téléchargements de fichiers, les modifications à l'écran ou toute autre chose.

Mieux encore, ces codes fonctionnent dans les navigateurs datant d'IE 8 ! C'est donc une option assez solide si vous êtes préoccupé par l'accessibilité.

9. Champs de téléchargement multiple

Voici un dernier champ personnalisé avec une touche : il semble assez simple esthétiquement – ​​mais le vrai prix est dans la fonctionnalité.

Ce champ de téléchargement a été conçu pour prendre en charge plusieurs fichiers à la fois. Vous ne voyez généralement pas cela avec les champs de saisie - ou du moins pas par défaut. Les utilisateurs doivent sélectionner plusieurs fichiers dans la même fenêtre et le backend doit le prendre en charge.

Avec cet extrait, vous pouvez répertorier tous les noms de fichiers dans un seul champ de téléchargement. Vous pouvez même utiliser JavaScript pour ajouter ces noms de fichiers ailleurs sur la page bien en vue.