Angular 2 avanzado: Gestión de archivos en PHP

Enviar documento desde HTML

¡Prueba gratis durante 10 días

nuestros 1218 cursos !

Prueba gratis Mostrar modalidades de suscripción
En esta lección vamos a tomar un documento HTML, vamos a configurarlo para que utilice una librería externa de angular y finalmente tomaremos un archivo ubicado en un ordenador local y lo enviaremos a un servicio que lo va a almacenar dentro de un servidor externo.
09:28

Transcripción

En esta lección vamos a aprender cómo cargar un documento desde una aplicación Angular para que podamos guardarlo dentro de un servidor. Yo estoy trabajando acá en mi aplicación y puedo navegar dentro de diferentes carpetas. Voy a utilizar esta funcionalidad para poder guardar un archivo independientemente de la carpeta en la que me encuentre. Vamos a ir a nuestra aplicación. Voy a utilizar algunos componentes especiales. En este caso, voy a trabajar una librería externa llamada "ngx-uploader". Voy a importarla directamente a mi documento. Ya he instalado y configurado esta librería dentro de mi aplicación. Voy a incluir los módulos "NgUploaderOptions", "UploaderFile", "UploaderRejected" dentro de mi aplicación utilizando "ngx-uploader". Una vez que ya lo tengo definido dentro de mi aplicación también necesito incluir un elemento dentro de mi constructor para inicializar una variable, en este caso, voy a utilizar "Inject(NgZone) private zone" y vamos a definir acá una zona que vamos a utilizar dentro del componente y recordemos también, que debemos incluir "Zone" e "Inject" que vienen dentro del "core" de Angular para poder trabajar correctamente esta aplicación La información que te estoy dando la estoy sacando desde la página oficial de "ngx-uploader" que es donde está la documentación de este componente. Este es un componente de terceros, no es directamente del equipo original de Angular, pero es bastante útil y puedes encontrar información en "jkuri/ngx-uploader". Aquí está toda la información que estoy utilizando para instalarlo dentro de mi aplicación. Puedes encontrar los detalles sobre el código que voy a incluir. Parte del código que está dentro de la página que te acabo de mostrar es un bloque de opciones. Para incluir un bloque de opciones necesito crear una variable, en este caso, le vamos a poner "options" que va ser del tipo "NgUploaderOptions". Esas son las opciones de configuración que vamos a asignarle al objeto que vamos a incluir para poder cargar archivos a Internet y dentro de "constructor", muy importante, dentro del constructor, vamos a incluir este bloque de código que incluye las opciones. Este bloque lo he copiado desde la documentación oficial y, lo que estoy haciendo acá, es configurarlo. Tenemos entonces "NgUploaderOptions" que es un nuevo objeto y le vamos a definir cuál es la ruta donde vamos a guardar la información. En mi caso, esta es la ruta donde se encuentra un documento que va a recibir datos, tanto de tipo "POST" como archivos para poder guardar en un servidor. También estoy utilizando algunas opciones como "filterExtensions" que me permite a mí filtrar archivos según extensión y le estoy definiendo que soporte únicamente "jpg", "png" y "gif". Estos dos elementos los puedes eliminar, los puedes configurar también. Yo los voy a dejar únicamente para que sea interesante el ejemplo y que nada más pueda cargar archivos en "jpg", "png" y "gif". Ya tenemos la base de lo que va a ser la configuración de mi aplicación. También estoy utilizando el método "POST" que es muy importante para poder enviar la información y un punto importante, estoy trabajando con un parámetro llamado "data" donde estoy incluyendo acá un modelo. Vamos a cambiarle el nombre y vamos a poner "miModelo". Este modelo me va a permitir cargar datos para poder enviar variables al documento externo. Así que, también voy a definir esta variable que se va a llamar "miModelo". Entro en mi aplicación. La voy a definir de tipo "any" y también la voy a definir que va a ser un objeto. Sabiendo eso, también, vamos a definir un evento. Este evento va a ser parte del componente que estamos creando y se va a llamar "inputUploadEvents" y va a ser tipo un "Emitter". Esto nos va a permitir distribuir información, en este caso, dentro del mismo componente para que podamos almacenarla en un servidor. Ya tenemos la configuración base de nuestro componente y solamente necesitamos agregarlo dentro de la plantilla, así que vamos a buscar la plantilla. En este caso yo estoy trabajando desde "lista-de-archivos.component". Y acá yo tengo una lista donde se muestran los archivos que se encuentran en una carpeta. Voy a agregar un formulario. Voy a ponerlo directamente en el código y te voy a explicar qué es lo que estoy haciendo. Tengo un formulario al que le he definido un "id", le he definido un evento llamado "ngSubmit" donde estoy recibiendo información de un formulario. He definido una variable local como formulario y estoy atrapando acá los datos de este formulario. También tengo un input, en este caso de tipo "file" que son inputs estándar que trabajamos para recibir archivos y para distribuirlos dentro de un formulario. Estoy asignado una clase "hidden" simplemente para que se vea más interesante el componente y la parte más importante es que estoy asignándole esta directiva "ngFileSelect". Así es como estoy inyectando todas las conductas de la librería que hemos importado, en esta caso "ngx-uploader". Tenemos alguna opciones que es parte de la documentación que se incluye dentro del componente original. Tenemos eventos y, la parte más importante, tenemos un evento llamado "onUpload" que está invocando un método llamado "handleUpload" y tenemos un botón de "submit" que va a activar este formulario y va a desatar la conducta para poder cargar nuestro servidor. Vamos a crear los métodos necesarios para hacer la carga. Primero vamos a crear este método "onSubtmit", así que vamos a ir a nuestro documento y definimos "onSubtmit", que va a ser de tipo "void". "onSubtmit" lo que va a hacer es que va a desatar un evento llamado "startUpload". Esto es parte del componente que estamos trabajando y, una vez que se activa este evento, va a comenzar a enviar información al servidor, según los parámetros que hemos definido, y cuando termine va a invocar este otro método llamado "handleUpload", tal como lo hemos definido acá, con "upload" cuando acabe de cargar los archivos. Vamos a tener acá algunos datos que van a ser la respuesta, en este caso "this.response" es la respuesta que vamos a recibir de nuestro servidor. Yo voy a definir esta variable como de tipo "any", en caso de que no sepamos cuál va a ser el formato que vamos a recibir desde el servidor y también estoy invocando acá el método "this.peticionExtra" (sic) porque lo que necesito es que se actualice la lista una vez que he enviado archivos al servidor. Así voy a poder ver cuál es el archivo que he enviado y vamos a tener una lista actualizada. También, otro detalle es que vamos a buscar el método "peticionExterna" y voy a necesitar enviarle al servidor un parámetro donde se define la ruta. Como viste, he creado un modelo, acá, que está enviando datos, estos datos se van a recibir en formato "POST" dentro del documento de PHP, así que voy a definir cuáles son las variables que va a recibir mi documento y, precisamente, vamos a ponerle el nombre "miModelo". El modelo le voy a agregar un parámetro llamado "ruta" que justamente es una variable que va a recibir mi documento para saber en qué parte copiar el archivo y acá, voy a llamar un servicio que tengo instalado que me da información actualizada de la ruta exactamente donde nos encontramos. Vamos a guardar la información y estamos listos para probar nuestra aplicación. Voy a actualizar y ya tenemos acá un componente que nos permite seleccionar, en este caso, una imagen porque lo tenemos restringido a "componente de imágenes". Vamos a hacer clic, ya tengo algunas imágenes. Presiono "Enviar" y vemos que ya tenemos activas las conductas de nuestro servidor. Hemos enviado un documento a un servidor, lo hemos almacenado, recibimos la confirmación de que el documento se guardó correctamente y actualizamos nuestra lista y ya tenemos acá una presentación de nuestro documento, incluso también podemos borrarlo, y ya podemos trabajar con equipos como si estuviéramos trabajándolo directamente con el explorador de nuestro ordenador

Angular 2 avanzado: Gestión de archivos en PHP

Aprende a crear vínculos entre PHP y Angular 2 mediante un ejemplo práctico en el que trabajarás del lado del servidor con PHP y la parte web con la tecnología Angular de Google.

3:20 horas (33 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:19/04/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.