Saltar al contenido

Widget de Carga de Varios Archivos

Descripción

Este widget se actualizó en enero de 2022

El Widget de carga de archivos múltiples 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 almacenando archivos temporalmente en una sola columna y utilizando el evento de guardado para extraer el archivo binario y moverlo a una tabla separada donde se puede procesar más o mover a un archivo local o de red. sistema.

  • 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 Habilite (1) o deshabilite (0) la vista previa para tipos de archivos de imagen.
    allowMultiple 1 No Habilite (1) o deshabilite (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 guardado para cada archivo que se carga en la columna de archivos del objeto de negocio.

    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/propiedades adicionales, deberá editar el archivo "binder.js" directamente en el widget. Tenga en cuenta que es posible que los parámetros/propiedades adicionales agregados no funcionen como se esperaba y solo se han probado los parámetros anteriores.

Configuración

Todas las configuraciones/capturas de pantalla a continuación se basan en la versión 3.1.27791 de Vinyl

Para que el widget de carga de archivos múltiples funcione correctamente necesitamos 2 tablas separadas. Uno para los archivos que se guardarán (en nuestro ejemplo, esta es la tabla "Archivo") y otro que asociará las cargas de archivos con otros datos según el caso de uso de su aplicación; en nuestro ejemplo, esta es la tabla "Ticket".

Definición de Tabla de Tickets

tabla de boletos.png

Nota

La columna PK (TicketID) y la columna Binary (Archivo) son las únicas columnas requeridas

Definición de Tabla de Archivos

tabla de archivos.png

Nota

La columna PK (FileID), la columna binaria (Archivo) y la columna FK para otra tabla (TicketID) son las únicas columnas requeridas

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

Boleto (fuente)

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

ticketsource.png

Boleto (archivo)

Nuestro segundo objeto comercial apunta a la misma tabla de Tickets, pero solo contiene la PK (TicketID), el Archivo y el nombre de archivo (opcional). Esto es importante porque necesitamos un objeto comercial separado para que el widget esté activado para poder cargar varios archivos en paralelo: archivo de boletos.png

Boleto (insertar en Archivo)

Nuestra última regla comercial es una regla Insertar CRUD que insertará un nuevo registro en la tabla Archivo. Apuntamos a la tabla de archivos y le damos 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 termine de cargarse. Debido a que nuestra tabla de tickets solo tiene una única columna de Archivo binario, esta configuración permite asociar una cantidad dinámica de archivos con un único registro de Ticket:

ticketsaveevent.png

ticketeventregistration.png

Ahora podemos pasar a la capa UI para configurar el widget. Nuestra página constará de 2 paneles. Uno usando Ticket (Fuente) y el otro usando Ticket (Archivo):

diseño de página.png

El panel que utiliza Ticket (Fuente) 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:

diseño de panel.png

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

ticketfilepaneldesign.png

control de archivos.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 esta 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 Archivo está configurada en el evento Guardar de Ticket (Archivo), 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 que realizar algún procesamiento o acción adicional en un archivo, debe hacerlo en el evento Insertar de la tabla Archivo. 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 directorios por niveles para los archivos, consulte el Sistema de archivos de Amazon S3 artículo.

Vídeo de Ejemplo de Despliegue de Widgets