Subir archivos con Angular2
Subir archivos con Angular2

Subir archivos con Angular 2 es incluso más sencillo que hacerlo con AngularJS gracias al ng2-uploader, simplemente debemos instalarlo con el comando npm y utilizarlo, tiene posibilidad de subir múltiples archivos incluso haciendo uso de un progressbar.

Poco a poco podemos ver cómo la comunidad va creando herramientas necesarias para poder seguir trabajando con Angular 2 de la misma forma que lo hacíamos con AngularJS, en este caso una herramienta completa para subir archivos con Angular 2 utilizando typescript.

Si te interesa aprender a subir archivos con AngularJS aquí tienes dos enlaces que te pueden interesar.

Subir archivos con Angular 2

Lo primero que debemos hacer es instalar el package con el siguiente comando.


Ahora debemos abrir el archivo index.html de nuestra aplicación y mapear con SystemJS la dependencia.


Ya estamos en disposición de subir archivos con Angular 2 con dos lineas de código, para ello crea el siguiente componente donde realizamos la configuración necesaria para poder subir archivos de uno en uno.


En este caso puedes ver que apuntamos a un servidor local que trabaja con php, y también puedes ver qué el código no tiene nada de especial, todo es muy normal, sólo importamos la directiva UPLOAD_DIRECTIVES y definimos un método llamado handleUpload, este método hará el envío del archivo al servidor cuando lo seleccionemos de nuestro ordenador.

Ahora crea el archivo src/app.html y añade el siguiente código, aquí tendremos el html necesario para seleccionar el archivo.


Sólo eso, no necesitamos nada más, a través de la directiva onUpload de ng2-uploader cuando seleccionemos el archivo éste será automáticamente subido al servidor.

Si te interesa aprender a trabajar de forma completa con Angular 2 y Typescript aquí tienes un curso desde 0.

Subir archivos con PHP

Ahora sólo nos queda crear el archivo php para realizar la subida, el siguiente código sacado de la documentación es suficiente.


Lo único que debes hacer es crear el directorio uploads y darle permisos, nada más, si seleccionas un archivo verás que éste sube de forma automática al servidor y en la vista tenemos la respuesta debajo del campo file.

Subir archivos con NodeJS y Express

Para subir el archivo con NodeJS y Express primero debemos instalar un par de cosas, multer y cors, éste último para permitir peticiones desde servidores externos a nuestra aplicación.


Ahora debemos configurar cors, abre el archivo app.js y añade las siguientes lineas.

Si te interesa aprender a trabajar de forma completa con NodeJS y Express 4 aquí tienes un curso desde 0.

Ahora sólo nos queda subir el archivo al servidor con nodejs, el siguiente código funciona perfectamente.


Lo único que debes cambiar es la url que hemos configurado en Angular 2 y todo funcionará, recuerda crear el directorio public/uploads en el servidor.

Subir múltiples archivos con Angular 2

Igual de sencillo que es subir un archivo lo es subir múltiples archivos con Angular 2, simplemente debemos modificar un poco el componente y la vista de Angular 2, primero el componente.


Y ahora crea el archivo src/multi.html y añade el siguiente código para poder subir múltiples archivos con Angular 2.


El código en el servidor será el mismo, aunque ahora podemos subir múltiples archivos éstos serán procesados de uno en uno en el evento onUpload, sólo hemos añadido el atributo multiple a nuestro campo de tipo file.

Y eso es todo, de esta forma tan sencilla podemos subir archivos con Angular 2 utilizando PHP y NodeJS con Express, espero que te haya parecido útil.