Saltar al contenido

Widget de Carga de Varios Archivos

Descripción

Este widget se actualizó en enero de 2022

El Widget de carga de varios archivos utiliza la biblioteca FilePond, versión 4.28.2, que se puede encontrar en https://github.com/pqina/filepond. Este widget permite cargar varios archivos de forma sincrónica o asincrónica al almacenar temporalmente los archivos en una sola columna y utilizar el evento de guardado para extraer el binario del archivo y moverlo a una tabla separada donde se puede procesar más o mover a un sistema de archivos local o de red.

  • Creador original: JP Fortier
  • Actualizado por: Andros Haggins y Shrey Kumar
  • Tipo: Widget de control
  • Parámetros:

    Nombre del parámetro Predeterminado Traducible Descripción
    allowImagePreview 1 No Habilitar (1) o deshabilitar (0) la vista previa para los tipos de archivos de imagen.
    allowMultiple 1 No Habilitar (1) o deshabilitar (0) la adición de múltiples archivos.
    forceReload 1 No Habilite (1) o deshabilite (0) la ejecución de una actualización global después de que se haya cargado un lote de archivos.
    maxParallelUploads 1 No Número máximo de archivos que se pueden cargar en paralelo. El máximo probado es 100.
    runSave 1 No habilite (1) o deshabilite (0) la ejecución del evento de guardar para cada archivo que se cargue en la columna de archivo del objeto comercial.TABLEROWEND

    Hay más parámetros disponibles para configurar según la documentación de FilePond en https://pqina.nl/filepond/docs/print-version/#toc en la sección "Propiedades". Para agregar parámetros o propiedades adicionales, deberá editar el archivo "binder.js" directamente en el widget. Tenga en cuenta que los parámetros o propiedades adicionales que agregue pueden no funcionar como se espera y solo se han probado los parámetros anteriores.

Configuración

Para que el widget de carga de varios archivos funcione correctamente, necesitamos dos tablas independientes. Una para guardar los archivos (en nuestro ejemplo, la tabla "Archivo") y otra que asociará las cargas de archivos con otros datos según el caso de uso de la aplicación (en nuestro ejemplo, la tabla "Ticket").

Definición de Tabla de Tickets

tabla de tickets.png

Nota

La columna PK (TicketID) y la columna Binary (File) son las únicas columnas obligatorias

Definición de Tabla de Archivos

tablaarchivo.png

Nota

La columna PK (FileID), la columna Binary (File) y la columna FK a otra tabla (TicketID) son las únicas columnas requeridas

Ahora que nuestras tablas están configuradas, podemos pasar a la configuración de la regla de negocio. Necesitaremos un mínimo de 3 reglas de negocio, 2 objetos de negocio y 1 regla CRUD para insertar un archivo en la tabla de archivos.

Billete (fuente)

El primer objeto comercial es simplemente un objeto de origen para la tabla Ticket. Este es el objeto comercial que usaremos en nuestro primer panel, al que se vinculará nuestro panel con el widget y que nos permitirá asociar un archivo con un registro específico:

ticketsource.png

Billete (archivo)

Nuestro segundo objeto comercial apunta a la misma tabla de tickets, pero solo contiene la clave principal (TicketID), el archivo y el nombre del archivo (opcional). Esto es importante porque necesitamos un objeto comercial independiente para que el widget esté activado para que se puedan cargar varios archivos en paralelo: ticketfile.png

Billete (insertar en Archivo)

Nuestra última regla comercial es una regla CRUD de inserción que insertará un nuevo registro en la tabla de archivos. Apuntamos a la tabla de archivos y asignamos un NewUUID() para la columna FileID. Esta regla CRUD se agregará al evento de guardado de nuestro objeto comercial anterior en el siguiente paso:

ticketinsertcrud.png

Ahora asociamos la regla CRUD Ticket (Insertar en archivo) con el evento de guardado de nuestro segundo objeto comercial Ticket (Archivo) y agregamos un enlace en TicketID como se muestra a continuación. Esto moverá cada archivo a la tabla Archivo una vez que finalice la carga. Debido a que nuestra tabla de tickets solo tiene una única columna Archivo binario, esta configuración permite asociar una cantidad dinámica de archivos con un único registro de Ticket:

ticketsaveevent.png

registrodeeventosdeentrada.png

Ahora podemos pasar a la capa de interfaz de usuario para configurar el widget. Nuestra página constará de dos paneles. Uno que utiliza Ticket (Fuente) y el otro que utiliza Ticket (Archivo):

pagedesign.png

El panel que utiliza Ticket (Source) tiene menos restricciones en cuanto a configuración, siempre que nuestro próximo panel esté vinculado a él. Así es como se ve el nuestro:

paneldesign.png

Nuestro siguiente panel que utiliza Ticket (Archivo) tiene un único control Archivo donde configuraremos el widget:

ticketfilepaneldesign.png

archivocontrol.png

En Cosmético > Información del widget, seleccionará el widget MultiFileUpload. Si desea cambiar alguno de los parámetros predeterminados, puede hacerlo haciendo clic en los 3 cuadros debajo de los parámetros, de la siguiente manera:

widgetparameters.png

Aquí puede ver que hemos cambiado maxParallelUploads a 25. Aunque runSave sigue siendo 1, lo mostramos aquí para mostrar su importancia para la funcionalidad de cómo funciona este widget. Dado que nuestra regla CRUD que mueve nuestro archivo a la tabla File está configurada en el evento Save de Ticket (File), debemos asegurarnos de que esté configurado en 1 para que funcione correctamente. Si runSave no está configurado en 1, no podremos manejar varios archivos.

Si tiene algún procesamiento o acción adicional que deba realizarse en un archivo, debe realizarse en el evento Insert de la tabla File. Esto incluiría mover el archivo a un sistema de archivos local o de red.

Nota

Si está cargando archivos en Amazon S3 Bucket y desea crear una estructura de directorio en niveles para los archivos, consulte el sistema de archivos de Amazon S3 artículo.

Ejemplo en Video de Despliegue de Widget