Plugin de téléchargement de fichier JavaScript gratuit ES5 / ES6 - Uppy
L’une des entrées de formulaire les plus difficiles à concevoir est la téléchargement de fichiers. Il a un style HTML par défaut, mais ce n’est pas la plus belle chose au monde.
Uppy prend les téléchargements de fichiers à un tout nouveau niveau avec un interface personnalisée et un processus de chargement dynamique de style Ajax.
Il fonctionne sur le code ES5 / ES6, afin que vous puissiez créer vos applications Web avec les dernières normes JavaScript. Et même prend en charge le téléchargement de fichiers à partir de sites de stockage en nuage tels que Dropbox ou Google Drive, donc c’est un Script de téléchargement de fichier à plusieurs facettes pour le web.
Uppy est complètement gratuit et open-source, avec un repo sur GitHub. Cependant, le moyen le plus simple d’installer ce plug-in consiste à utiliser npm ou Yarn. l'exécuter comme un vrai paquet.
Une fois les fichiers ajoutés à votre site Web, il vous suffit de inclure le fichier Uppy.js et le code CSS. Ensuite, vous ciblez le champ de saisie souhaité et Uppy se charge du reste..
Il a une interface unique qui ressemble à un grand placement carré glisser-déposer des fichiers. Vous pouvez également sélectionner des éléments de votre disque dur ou même télécharger des fichiers à distance à partir d'URL externes. Assez fou!
Vous pouvez trouver l’ensemble du processus d’installation sur la page de documentation, mais nécessite au moins une certaine compréhension de ECMAScript 6. Cette bibliothèque est tournée vers l'avenir des scripts et n'est pas la chose la plus simple à utiliser avec du JavaScript purement vanillé..
Mais, si vous êtes sérieux au sujet du développement Web, cela vaut la peine d'apprendre de toute façon l'ES6. Tu peux trouver des tonnes de ressources en ligne pour l'auto-apprentissage et vous pouvez même utiliser Uppy comme votre premier “réal” projet pour plonger et commencer à apprendre.
Découvrez l'exemple de tableau de bord pour voir Uppy en action. Pour cette page, le le téléchargement est caché derrière un déclencheur, où vous cliquez sur le bouton pour afficher un champ de téléchargement modal.
De là, vous pouvez choisir si vous souhaitez télécharger une image depuis votre ordinateur, depuis le web ou même depuis votre webcam!
La page Exemples propose une foule de sujets à examiner, notamment un exemple glisser / déposer, avec un page de démonstration internationalisée.
Mais, pour vraiment savoir comment cela fonctionne, je vous recommande de parcourir la documentation et de parcourir le référentiel principal de GitHub. Vous pouvez également partager vos pensées avec les créateurs sur Twitter @transloadit.
