UploadFiles

Como adjuntar multiples Archivos desde un componente Lightning PARTE 1

Tweet about this on TwitterShare on Facebook0Share on Google+0Share on LinkedIn0Digg thisBuffer this pageEmail this to someone

Existen ocasiones en las que surge la necesidad de adjuntar multiples archivos a la hora de rellenar un formulario, de un componente Lightning. Como desarrolladores, podemos afirmar que en la mayoría de esas ocasiones no contamos con las suficientes herramientas que implementen esa funcionalidad de la forma que deseamos.

Por este motivo se ha creado un componente lightning extensible cuyo funcionamiento será expuesto a continuación.

Diseño y atributos

Nuestro componente llamado FileInputLoader se basará en un botón para iniciar el wizard de selección del archivo.

Una vez escogido el archivo se mostrará una miniatura con el título del mismo y un botón para deshacer esa selección. Para mostrar cada miniatura crearemos otro componente llamado FileItem cuya función será la de representar dicho fichero y generar un evento para gestionar su borrado en el padre (FileInputLoader).

Para que nuestro componente sea reutilizable y extensible contendrá los siguientes atributos básicos:

  • fileList: que representa la lista de archivos seleccionados. Será accesible desde nuestro componente formulario.
  • maxNumFiles: número máximo de archivos (3 por defecto).
  • maxFileSize: máximo tamaño permitido para los archivos (4.5MB por defecto).

Con estos atributos nuestro componente se podrá integrar de la siguiente manera:

Para mostrar la lista de archivos utilizaremos la iteración de lightning. Con cada iteración “inicializamos” nuestro componente hijo que representará al archivo en cuestión. Para ello, dicho componente cuenta con un atributo de entrada file que corresponderá al objeto procedente de la lista.

Seleccionando archivos

Para la selección de archivos se ha utilizado un input de tipo file de HTML el cual está oculto y un botón cuyo evento click acciona el botón de dicho input. De esta manera podremos simplificar la apariencia de nuestro input mediante un sólo botón.

Ahora necesitaremos una función en nuestro controlador que se encarga de insertar en la lista el archivo seleccionado. Dicho archivo lo tendremos disponible como parámetro cuando se produzca el evento change sobre el elemento input.

Borrando elementos

Para gestionar el borrado en cada miniatura aparecerá un botón. En el momento en el que el usuario haga click sobre el botón, FileItem lanzará un evento que manejará FileInputLoader. Para este proceso crearemos un evento EvtDeleteFile el cual tendrá un atributo cuyo valor será el archivo a eliminar de la lista.

Nuestros componentes quedarían de la siguiente forma:

Creamos el evento.

Ahora tendremos que desarrollar la lógica en los controladores de cada componente.

De esta manera el evento será lanzado por el hijo y recogido por el padre. El padre se encargará de actualizar la lista.

Validación dinámica

En función de los parámetros maxNumFiles y maxFileSize realizaremos la validación para nuestros archivos. Para validar el primer parámetro podemos mostrar un contador de archivos pendientes y deshabitar el botón principal cuando la se haya llegado al máximo.

Para la segunda validación crearemos un contenedor que muestre los posibles mensajes de error y añadiremos una nueva condición al método addNewFile del controlador para comprobar que el archivo seleccionado cumple la regla.

El método addNewFile quedaría de la siguiente manera:

Una vez desarrollado este componente podremos ubicarlo e integrarlo dentro de cualquier otro componente Lightning simplemente inicializando sus atributos como deseemos. El componente que lo englobe deberá de implementar la funcionalidad necesaria para el proceso de subida de los archivos y conversión a objetos de Salesforce.

Este proceso se encuentra accesible en la segunda parte de este post: Como adjuntar multiples Archivos desde un componente Ligthning PARTE 2.