Skip to Content

Multi File Upload Widget

Description

This widget was updated in January 2022

The Multi File Upload Widget uses the FilePond library, version 4.28.2, which can be found at https://github.com/pqina/filepond. This widget allows multiple files to be uploaded synchronously or asynchronously by temporarily storing files in a single column and utilizing the save event to pull the file binary and move it to a separate table where it can be processed further or moved to a local or network file system.

  • Original Creator: JP Fortier
  • Updated By: Andros Haggins & Shrey Kumar
  • Type: Control Widget

  • Parameters:

    Parameter Name Default Translatable Description
    allowImagePreview 1 No Enable (1) or disable (0) preview for image file types.
    allowMultiple 1 No Enable (1) or disable (0) adding multiple files.
    forceReload 1 No Enable (1) or disable (0) running a global refresh after a batch of files has been uploaded.
    maxParallelUploads 1 No Maximum number of files that can be uploaded in parallel. The max tested is 100.
    runSave 1 No Enable (1) or disable (0) running the save event for each file being uploaded to the Business Object's file column.

    More parameters are available to be configured based on the FilePond documentation at https://pqina.nl/filepond/docs/print-version/#toc under the "Properties" section. To add additional parameters/properties, you will need to edit the "binder.js" file in the widget directly. Please note any additional parameters/properties added may not work as expected and only the parameters above have been tested.

Configuration

All configuration/screenshots below are based on Vinyl version 3.1.27791

For the Multi File Upload Widget to work correctly we need 2 separate tables. One for the files to be saved to, in our example this is the "File" table, and another that will associate your file uploads with other data based on your application's use case, in our example this is the "Ticket" table.

Ticket Table Definition

tickettable.png

Note

PK column (TicketID) and Binary column (File) are the only required columns

File Table Definition

filetable.png

Note

PK column (FileID), Binary column (File), and FK column to other table (TicketID) are the only required columns

Now that our tables are setup, we can move over to the Business Rule configuration. We will need a minimum of 3 Business Rules, 2 Business Objects and 1 CRUD rule to insert a file to the file table.

Ticket (Source)

The first business object is just a source object for the Ticket table. This is the business object we will use on our first panel our panel with the widget will bind to and allow us to associate a file with a specific record:

ticketsource.png

Ticket (File)

Our second business object targets the same Ticket table, but only contains the PK (TicketID), File, and filename (optional). This is important because we need a separate business object for the widget to be on for multiple files to be able to be uploaded in parallel: ticketfile.png

Ticket (Insert to File)

Our last business rule is an Insert CRUD rule that will insert a new record to the File table. We target the file table and give a NewUUID() for the FileID column. This CRUD rule will be added to the save event for our previous business object in the next step:

ticketinsertcrud.png

We now associate the Ticket (Insert to File) CRUD rule with the save event of our second business object Ticket (File) and add a binding on TicketID as shown below. This will move every file to the File table once it is done uploading. Because our ticket table only has a single Binary File column, this configuration allows a dynamic number of files to be associated with a single Ticket record:

ticketsaveevent.png

ticketeventregistration.png

Now we can move to the UI layer to setup the widget itself. Our page will consist of 2 panels. One using Ticket (Source) and the other using Ticket (File):

pagedesign.png

The panel using Ticket (Source) has less restrictions when it comes to configuration as long as our next panel is bound to it. This is what ours looks like:

paneldesign.png

Our next panel using Ticket (File) has a single File control where we will configure the widget:

ticketfilepaneldesign.png

filecontrol.png

Under Cosmetic > Widget Information you will select the MultiFileUpload Widget. If you would like to change any of the default parameters, you can do so by clicking the 3 boxes under parameters like so:

widgetparameters.png

Here you can see we have changed maxParallelUploads to 25. Although runSave is still 1, we are showing it here to show its importance to the functionality of how this widget works. Since our CRUD rule that moves our file to the File table is configured on the Save event of Ticket (File), we need to make sure this is set to 1 to work properly. If runSave is not set to 1 we will not be able to handle multiple files.

If you have any further processing/actions that need to be done to a file, it should be done on the Insert event for the File table. This would include moving the file off to a local or network file system.

Note

If you are uploading files to Amazon S3 Bucket, and looking to create a tiered directory structure for the files please see the Amazon S3 File System article.

Video example of Widget Implementation