Free ES5 / ES6 Plugin de carga de archivos JavaScript - Uppy

Una de las entradas de formulario más difíciles de diseñar es la Subir archivo. Tiene un estilo HTML predeterminado, pero no es la cosa más bonita del mundo..

Uppy lleva las cargas de archivos a un nivel completamente nuevo con una interfaz personalizada y un Proceso dinámico de carga al estilo Ajax..

Eso corre en codigo ES5 / ES6, para que pueda construir sus aplicaciones web con los últimos estándares de JavaScript. Y, incluso soporta cargas de archivos desde sitios de almacenamiento en la nube como Dropbox o Google Drive, por lo que es una Archivo multifacético para subir script para la web.

Uppy es Completamente gratis y de código abierto., con un repo en GitHub. Sin embargo, la forma más sencilla de instalar este complemento es a través de npm o Yarn, por lo que puede ejecutarlo como un paquete real.

Una vez que obtenga los archivos agregados a su sitio web, simplemente incluye el archivo Uppy.js y el código CSS. Luego, apunta al campo de entrada que quieras y Uppy se encarga del resto..

Tiene una interfaz única que parece una gran plaza de colocación para arrastrar y soltar archivos. Tú también puedes Seleccione los elementos de su disco duro o incluso subir archivos de forma remota desde direcciones URL externas. Loca linda!

Puede encontrar todo el proceso de configuración en la página de documentación, pero Requiere al menos algo de comprensión de ECMAScript 6. Esta biblioteca mira hacia el futuro de las secuencias de comandos y no es lo más fácil de usar con JavaScript puro de vainilla.

Pero, si eres serio sobre el desarrollo web, vale la pena aprender ES6 de todos modos. Puedes encontrar toneladas de recursos en línea para autoaprendizaje e incluso puedes usar Uppy como tu primer “real” proyecto para bucear y comenzar a aprender.

Echa un vistazo al Ejemplo de Dashboard para ver a Uppy en acción. Para esta página, el la carga está oculta detrás de un botón de activación, donde hace clic en el botón para mostrar un campo de carga modal.

Desde allí, puede seleccionar si desea cargar una imagen. desde su computadora, desde la web, o incluso desde su webcam!

La página de ejemplos ofrece un montón de elementos para ver, incluyendo un Ejemplo de arrastrar y soltar, junto con un página de demostración internacionalizada.

Pero, para saber realmente cómo funciona esto, recomiendo que hojee los documentos y navegue por el repositorio principal de GitHub. También puede compartir sus pensamientos con los creadores en Twitter @transloadit.