Insert excerpt | ||||||||
---|---|---|---|---|---|---|---|---|
|
Introduction
Users can upload their own files into PhixFlow using actions. This can be done using either a
Insert excerpt | ||||||
---|---|---|---|---|---|---|
|
Insert excerpt | ||||||
---|---|---|---|---|---|---|
|
Insert excerpt | ||||||
---|---|---|---|---|---|---|
|
- Upload images/files and store them as a record. - Store them of the details of where to access them ?as a record.
- Upload files to be used in an analysis model. These files can be made available for users to download.
Example
In a simple contacts application, it is possible using file uploads to
- Allow an application user to upload their own image against a contact:
- Bulk upload Excel files containing multiple contacts to appear within an application.
- Download and files uploaded at a later date. - Note sure this reds as intended? At a later date? Message me about this.files stored on the server. These could be previous file uploads.
Solution
Images and files are stored on the server when uploaded by a file collector. These files are placed into a standard directory and need to be moved into an appropriate directory which can be accessed by the front end. To find out how to create these directories on the server, see XXX.
Once the new directory has been created, an analysis model is required that contains a File Collector and a Table. An action will then run this model, the user will upload a file, the file collector will move it to the correct folder and the URL to access this file will be stored in an attribute on the table. - can you list this as bullet point steps. Maybe tie the steps to the sub headings below.
Setting up an analysis model to upload and move a file with an action
can all of the description just be combined in the solution section above and have this section jump straight into how to set it up?the following is required
- an action configured to upload a file
- an analysis model containing a file collector and a table
- a task plan that runs the analysis model
This is a worked example to set up a model that collects an uploaded file, moves it, and all the upload subdirectories, to the required new directory using an archive location on a file collector, to tell the collector where to move the file once it has been processed.
When files are uploaded via an action, they are initially stored under the default upload directory:
Code Block |
---|
/opt/phixflow/data/phixflow/upload |
A subdirectory is created for each uploaded file, in the form:
Code Block |
---|
/opt/phixflow/data/phixflow/upload/[tag]/in/[uploadDate]/[uploadID]/[filename] |
where
- [tag] is the tag specified by the action or file collector,
- [uploadDate] is the date of upload represented in a numerical string,
- [uploadID] is a unique string used to identify each file, and
- [filename] is the name of the uploaded file.
When uploading files through the front end, we aim to move the files to a location under (either directly or via soft link) the below directory while preserving these subdirectories in order to uniquely reference each file.
Code Block |
---|
/opt/phixflow/data/phixflow/datalink |
1. Creating the action
- We jump straight to this? how did we get here? Also can you bullet point the steps people need to follow.to upload a file
In the File Upload section, tick File Upload and enter a Tag Expression (e.g. "contact"). The exact tag used does not matter but needs to be used later to reference the upload location. Ticking File Upload means that running the action will trigger a file upload prompt, allowing the user to select a file to upload.
2. Creating the Analysis Model
Create a new analysis model and create a
Insert excerpt | ||||||
---|---|---|---|---|---|---|
|
Next create a
Insert excerpt | ||||||
---|---|---|---|---|---|---|
|
Insert excerpt | ||||||
---|---|---|---|---|---|---|
|
On the new table, create 4 attributes with the following settings:
Attributes | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Property | 1 | 2 | 3 | 4 | ||||||||
Name | UploadDate | UploadID | FileName | FileLocation | ||||||||
Type | String | StringString | Bigstring | String | ||||||||
Length | 10 | 50 | 1000 | - I though 500 was max? Should be just say big string?1000 | ||||||||
Expression |
|
|
|
where _[dir] is the directory used to store the uploaded files | ||||||||
Purpose | Converts today's date into a string | uses context variable to return the upload ID string. | The internal variable _fileName is available when running a file collector, and returns the name of the file that has been uploaded. It must be prefixed with a pipe name. | eg.
This expression uses the upload date, upload ID and file name to build the URL containing the directory path of the uploaded file after it has been moved by the file collector. The URL is what is referenced by CSS properties to display the image. |
3. Creating the Task Plan
Create a new task plan and create an analysis task which runs the above table. On the created action, in the Run Task Plan section tick Run Selected Task Plan, and add the new task plan.
This means that after the action prompts the user to upload a file,
- the table will be run,
- which in turn runs the file collector
- the file collector
- finds the file in the upload location
- moves it to the new directory used to store the filesr
- the
- table
- then
- pulls through the file details
- generating its new location in the attribute FileLocation. This attribute can then be used whenever the file needs to be referred to.
Referencing Images on the Server
Once the user has identified the correct directory to store the file, it can be referenced using a URL. This URL must be in the format:
Code Block |
---|
url("[File Location]") For example: url("https:datalink/MyProject/MyImage.png") |
This URL is the value that needs to be stored and is referenced to display the image using CSS properties. Using the above example, the user stores the url of an image against each user in an attribute called 'ContactImage'. You can display this image on an area inside a card container (does it need to be in an area?) using the following style settings:
- Name: background-image
- Expression: _form.ContactImage
- Name: background-repeat
- Expression: no-repeat
- Name: background-size
- Expression: choose size – could be 100%, 20px, auto (see Image Sizing)
Changing Images on the Server
To change the image displayed in PhixFlow, upload a replacement image with the same name. The new image overwrites the original image. The existing URL continues to work and displays the new image. If the image name changes on the server, you need to update all the URLs that point to it.Mention that
Info |
---|
Occasionally browsers will cache images |
. If this happens the image may not change on the front end. To resolved this clear your browser cache and the image should display correctly. |
Using an actionflow
Sarah todo when file collector node is complete.