Introduction
The File Display Gallery component is used to facilitate the uploading and displaying of multiple files in PhixFlow. Files are previewed and where this is not possible, a generic placeholder image is displayed. The Serene Grey palette provides a number of templates, below is an example of the File Display Gallery form field.
File Display Gallery components require the following key items in order to function:
- A directory on the server to store the uploaded files and an entry in the System Configuration to point at this location
- A special type of table called a File Table to hold the information about the uploaded files
- This is added using an ERD
- A Table containing an attribute called folderId and of type, string, that is related to the above File Table via this attribute
- This is added using an ERD
Initial Setup
In order to store an uploaded file the following must be completed.
- Directory
- On your server, create a directory where the files will be uploaded. This should be accessible to the application
- In PhixFlow, from the Administration menu, open System → Configuration
- In the System Directories section → File Table Upload Location field, add the address of the directory setup in the first step, e.g. /opt/phixflow/data/file
- save your changes
- All uploaded files will now be placed in this directory
- File Table
- On your ERD, add a new File Table
- All the required attributes are added by default and cannot be modified
- On your ERD, add a new File Table
- Table
- On your ERD, use an existing or add a new Table
- Create a new attribute:
- Name:
folderId
- Type:
String
- Name:
- Create a new attribute:
- Create a Relationship from the folderId attribute on the File Table to the folderId attribute on the
Table - Data can now be saved directly to this table or via a relationship
- On your ERD, use an existing or add a new Table
Uploading Files
- Drag the File Display Gallery component from the Serene Grey palette onto your screen
- Add a backing attribute by clicking on the component until the properties for the inner component, File Display Gallery, displays on the right
- On the Properties tab, in the Backing Attribute section, click the icon
- Select the folderId attribute on your Table
- Now, with your screen Locked you can drag files onto the File Display Gallery component to populate the data. This populates the field
- Ensure the File Display Gallery form field is added to your save actionflow, so the data is saved
Creating a Download Hyperlink
A text hyperlink can be created that facilitates the downloading of a file.
- On the screen that is backed by the required table, click Attributes
- Navigate the File Table and drag the Url attribute onto your screen
- A hyperlink will be created that downloads the file associated to the current record, i.e. the file for the record currently on the form
- The hyperlink component is created using the template defined in the application's Properties → Styles tab → Default Components section → Default File Url Component
Background Icons
The background icons for the File Display Gallery indicate the following:
- When the File Display Gallery is available for the user to upload a file:
- When the user is dragging a file over the File Display Gallery component:
- When the File Display Gallery is read-only, this includes when the screen is Unlocked:
These style can be changed using Formatting Rule and the new CSS Drag Over property that can be applied to a CSS Property.