Personnalisez les uploaders de vos prochains projets grâce au HTML5

L'upload de fichier est un des points qui ont subi le plus gros coup de jeune lors du passage du HTML5. Finis les boutons d'upload tout moche qui ne nous donnent aucune information, et bonjour aux nouveaux boutons (toujours moche) qui nous proposent une API très intéressante pour les manipuler avec Javascript !

Les input[files] et le HTML5

Les avancées sur le point sont nombreux : il est maintenant possible d'obtenir des informations sur le nombre de fichiers sélectionnés, leurs poids, leurs extensions, et même dans le cas des images leur format et une prévisualisation du fichier ! Pour l'utilisateur, cela signifie être prévenu plus tôt en cas de fichier incompatible, et donc s’éviter un temps d'upload parfois long. Pour le serveur, cela signifie une meilleure économie de  sa bande passante.

De plus, cette technique est maintenant bien assise, disponible partout (ou presque, IE8 faits de la résistance), et est simple à émuler avec du flash dans le cas contraire, il n'y a donc aucune raison de ne pas en tirer parti !

Pour vous aider dans ce sens, je vous propose de découvrir cette liste d'outils vous simplifiant la tache.

Dropzone

Fineuploader

Image Uploader

Zurb file uploader

Pour aller plus loin

Ces ressources ne vous suffisent pas, et vous aimeriez monter un uploader de vos propres mains, pour rester plus simple, ou tout simplement car le support des anciens navigateurs ne vous intéresse pas. Je vous propose de découvrir ces deux ressources sur Codepen, qui vous aideront à démarrer dans la manipulation d'uploades.