Navigation

UploadFiles

Como adjuntar multiples Archivos desde un componente Lightning PARTE 1

Por
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).

Markup del componente FileInputLoader
1
2
3
4
5
<aura:component>
    <aura:attribute name="fileList" type="Object[]"/>
    <aura:attribute name="maxNumFiles" type="Integer" default="3"/>
    <aura:attribute name="maxFileSize" type="Integer" default="4500000"/>
</aura:component>

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

Integración de nuestro componente FileInputLoader
1
2
3
4
5
6
<aura:component>
    <!--Nuestro componente formulario-->
    <aura:attribute name="attachmentFileList" type="Object[]" default="[]"/>
 
    <c:FilesInput fileList="{!v.attachmentFileList}" maxNumFiles="4" maxFileSize="5000000"/>
</aura:component>

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.

Markup del componente FileItem
1
2
3
<aura:component>
    <aura:attribute name="file" type="Object"/>
</aura:component>

Lista de archivos inicializando nuestro componente FileItem en cada interacción
1
2
3
4
5
6
7
8
<aura:component>
    <!-- attributes -->
    <!-- input -->
    <!-- file list -->
    <aura:iteration items="{!v.fileList}" var="file">
        <c:FileItem file="{!file}"/>
    </aura:iteration>
</aura:component>

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.

Botón para accionar el input oculto
1
2
3
4
5
6
7
8
9
<aura:attribute>
    <!-- attributes -->
    <!-- input -->
    <input type="file" class="slds-hidden" aura:id="file"/>
    <p>
       <ui:button aura:id="addFileBtn" label="Choose" class="slds-button slds-button--neutral" press="{!c.chooseFile}"></ui:button>
    </p>
    <!-- file list -->
</aura:attribute>

Controlador Lightning del componente FileInputLoader
1
2
3
4
5
6
({
    chooseFile: function(component,event,helper){
        var inputElem = component.find('file').getElement();
        $(inputElem).click();
    }
});

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.

Enlazando el evento onchange del input file a una función del controlador
1
<input type="file" class="slds-hidden" aura:id="file" onchange="{!c.addNewFile}"/>

Método addNewFile del controlador del componente FileInputLoader
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
({
    chooseFile: function(component,event,helper){//...},
    addNewFile: function(component,event,helper){
        var tgt = event.target;
        if(tgt.files.length){
             var file = tgt.files[0];
             $(tgt).val(null);
             var fileList = component.get('v.fileList');
             var success = true;
             for(var i=0; i<fileList.length; i++){
                 success = fileList[i].name != file.name;
                 if(!success) break;
             }
             if(success){
                 fileList.push(file);
                 component.set('v.fileList',fileList);
             }
        }
    }
});

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:

Markup del componente FileItem completo
1
2
3
4
5
6
7
8
9
10
<aura:component>
    <aura:attribute name="file" type="Object"/>
    <aura:registerEvent name="delFile" type="c:EvtDelFile"
    <div>
        <p>
            <span>{!v.file.name}</span>
            <ui:button aura:id="delBtn" class="slds-button" press="{!c.delFile}" label="remove"></ui:button>
        </p>
    </div>
</aura:component>

Añadimos el handler al componente FileInputLoader
1
2
3
4
5
6
7
8
<aura:component>
    <!--attributes-->
    
    <!-- Event handlers -->
    <aura:handler name="delFile" event="c:EvtDelFile" action="{!c.delFile}" />
    <!--input-->
    <!-- file list-->
</aura:component>

Creamos el evento.

Código del evento EvtDeleteFile
1
2
3
<aura:event type="APPLICATION" description="Delete File event">
    <aura:attribute name="fileToDel" type="Object"/>
</aura:event>

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

Controlador para el componente FileItem
1
2
3
4
5
6
7
({
    deleteItem : function(component, event, helper) {
        var e = component.getEvent("delFile");
        e.setParams({'fileToDel': component.get("v.file")});
        e.fire();
    }
});

Método para manejar el evento de borrado en el controlador del componente FileInputLoader
1
2
3
4
5
6
7
8
9
10
11
({
    chooseFile: function(component,event,helper){},
    addNewFile: function(component,event,helper){},
    delFile: function(component,event,handler){
        var fileToDel = event.getParam('fileToDel');
        var fileList = component.get('v.fileList');
        var idx = fileList.indexOf(fileToDel);
        if(idx > -1) fileList.splice(idx,1);
        component.set('v.fileList',fileList);
    }
});

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.

Validación del número de archivos en el componente FileInputLoader
1
2
3
4
5
6
7
8
9
10
<aura:component>
    <!-- attributes -->
    <!-- input -->
    <input type="file" class="slds-hidden" aura:id="file"/>
    <p>
       <span>You can attach {!(v.maxNumFiles) - (v.fileList.length)} files</span>
       <ui:button aura:id="addFileBtn" label="Choose" class="slds-button slds-button--neutral" press="{!c.chooseFile}" disabled="{!v.fileList.length==v.maxNumFiles}"></ui:button>
    </p>
    <!-- file list -->
</aura:component>

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.

Lista de errores en el componente FileInputLoader
1
2
3
4
5
6
7
8
9
10
<aura:component>
    <!-- attributes -->
    <aura:attribute name="errors" type="String[]" default="[]"/>
    <!-- input -->
    <!-- file list -->
    <!--errors-->
    <aura:iteration items="{!v.errors}" var="error">
        <p class="error">{!error}</p>
    </aura:iteration>
</aura:component>

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

Método addNewFile con validaciones (completo)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
({
    chooseFile: function(component,event,helper){},
    addNewFile: function(component,event,helper){
        var tgt = event.target;
        if(tgt.files.length){
             var file = tgt.files[0];
             $(tgt).val(null);
             var fileList = component.get('v.fileList');
             var errors = component.get('v.errors');
             errors = [];
 
             var maxFileSize = component.get('v.maxFileSize');
             var maxNumFiles = component.get('v.maxNumFiles');
 
             var success = (file.size < maxFileSize);
             if(success){
                 errors.push('Exceeded the maximum size allowed for file');
             }else{
                 for(var i=0; i<fileList.length; i++){
                     success = fileList[i].name != file.name;
                     if(!success){
                         errors.push('This file already exists');
                         break;
                     }
                 }
             }
             if(success){
                fileList.push(file);
                component.set('v.fileList',fileList);
                errors = [];
             }
             component.set('v.errors',errors);
        }
    },
    delFile: function(component,helper,handler){}
});

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.