Contents

Introduction

The File Display component is used to facilitate the uploading and displaying of 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 form field.

File Display components require the following key items in order to function:

1. A directory on the server to store the uploaded files and an entry in the

   Insert excerpt
   _system_config _system_config name full nopanel true

    to point at this location
2. A special type of table called a

   Insert excerpt
   _tableFile _tableFile nopanel true

    to hold the information about the uploaded files. This is added using an ERD

Initial Setup

In order to store an uploaded file the following must be completed.

1. Directory
   1. On your server, create a directory where the files will be uploaded. This should be accessible to the application
   2. In PhixFlow, from the

      Insert excerpt
      _administration _administration nopanel true

       menu, open System → 

      Insert excerpt
      _system_config _system_config nopanel true

1. 1. 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

   2. Insert excerpt
      _save_icon _save_icon nopanel true

       save your changes
   3. All uploaded files will now be placed in this directory
2. File Table
   1. On your ERD, add a new 

      Insert excerpt
      _tableFile _tableFile nopanel true

      1. All the required attributes are added by default
   2. If required, create a relationship between this File Table and your desired target table. The target table will require an attribute with a Type of File in order to create a relationship
      1. For example, if you wish to upload company logos, create a relationship to a your company table, create a logo attribute of the type File and link to the File Table

         Insert excerpt
         _key_primary _key_primary nopanel true

         
         
   3. Data can now be saved directly to this table or via a relationship

Note:

Uploading Files

1. Drag the File Display component from the Serene Grey palette onto your screen

   1. 
      

      Expand
      title View Serene Grey Template
      Serene Grey provides a number of templates that incorporate the File Display component, each designed to help you tackle a different task.  Form Fields - Defaults This File Display component is the default for the File data type and is designed to sit inline with the other default form fields. Basic Layouts The File Display is a component that provides the functionality of the file display in its raw form ready to be added to a screen or your own design. Card Containers File Display Card A card container which incorporates a read-only File Display component for displaying files and images. Ideal for product images or visual information. Contact Card A card container which incorporates a read-only File Display component for displaying files and images in a small circle. Ideal for contact profile images.

      
      

2. Add a backing attribute by right-clicking on the File Display component and selecting

   Insert excerpt
   _attributes_add_backing _attributes_add_backing nopanel true

   1. Select the Primary Key from your File Table if you are saving directly to the table or use the relational attribute (foreign key) on your related table
3. Now, with your screen

   Insert excerpt
   _lock _lock nopanel true

   ed you can drag files onto the File Display component to populate the data. This populates the field
4. Ensure the File Display 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.

1. On the screen that is backed by the required table, click

   Insert excerpt
   _attributes _attributes nopanel true

2. Navigate the File Table and drag the Url attribute onto your screen
3. 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
   1. The hyperlink component is created using the template defined in the application's

      Insert excerpt
      _property_settings _property_settings nopanel true

       →

      Insert excerpt
      _property_tabs _property_tabs name style nopanel true

       → Default Components section → Default File Url Component  

Background Icons

1. When the File Display is available for the user to upload a file:
   1. 
2. When the user is dragging a file over the File Display component:
   1. 
3. When the File Display is read-only, this includes when the screen is

   Insert excerpt
   _unlock _unlock nopanel true

   ed:
   1. 

These style can be changed using Formatting Rule and the new CSS Drag Over property that can be applied to a CSS Property.

Insert excerpt
_property_tabs _property_tabs name basic-h nopanel true

Basic Settings

Field	Description
Name	Insert excerpt Component Component name _name nopanel true
Aggregate Function	Insert excerpt Component Component name _aggregateFunction nopanel true
Allow file download	Insert excerpt _check_box_tick _check_box_tick nopanel true  to allow users to click on a File Component to download the associated file.
Show the file name	Insert excerpt _check_box_tick _check_box_tick nopanel true  to display the name of the file associated to the File Component.
Show preview	Insert excerpt _check_box_tick _check_box_tick nopanel true  to display a preview of the file associated to the File Component. For files where a preview is not possible, such as a CSV, a generic image is displayed which illustrates the file type, e.g. . Insert excerpt _check_box_untick _check_box_untick nopanel true  to display an appropriate holding image illustrating the file type for the record.

Advanced Settings

Insert excerpt
_property_tabs _property_tabs name style-h nopanel true

Style Settings