Attachments - v22-appfactory/appfactory-wiki GitHub Wiki

The following are notes regarding the attachment functionality and technical issues.

1. Select one or more files in the form file upload component.
   • File upload component calls /files/upload
   • Database function attachmentAddUpload is called
     • creates attachment record
     • creates userattachments record to link the attachment with the user
   • Returns link to download the file from the uploads directory
2. User submits the form with files selected in the file upload component
   • appformController form add or form update functions are called
   • After the form record is inserted/updated the formController.updateAttachments is called
     • The application directory is created if it does not exist
     • The file is moved from the uploads directory to the application directory
     • Database function attachmentUpdate is called
       • The attachment.location is updated for the new location
       • The userattachments link is removed
       • A tableattachments link is created for the table/record being updated
     • If there is a server action to save to a history file a tableattachments link is created to the history record

File upload capability is added to a formio form by including a File Component and setting component attributes. The following attributes are of interest:

1. Display Tab
   • Multiple Values - required in order to process multiple uploads
2. File Tab
   • Storage - select Url
   • Url - enter the url for the upload rest api [http://localhost:3000/files/upload]
   • Custom request options - add withCredential attribute { "withCredentials": true }
   • API Tab - no Application/Category/Test Field Mapping is required because the attachments are not stored in a column in the table but instead a link table is used
     NOTE: The Url attribute above is hard coded and should be replaced with a DNS name that can be redirected for the environment that is being targeted.
     

• POST /files/upload => uploadFiles() - stores file in uploads directory and links file to user
• GET /files/temp/:fileName => downloadTempFile - route to retrieve a file stored in the uploads directory
• GET /files/:appId/:fileName => downloadFile - route to retrieve an application file

• uploadFiles - processes file in temporary uploads directory and creates userattachments link
• downloadTempFile - download a file in the uploads directory
• downloadFile - download a file from an application directory
• updateAttachments - moves file from the uploads directory to its application directory

• Tables
  • attachments - The record of the file with a location, unique name, and original name
  • userattachments - Link table for linking users and attachments
  • tableattachments - Link table for a table/record and attachments
• Functions
  • attachmentAddUpload - creates the attachments record and the userattachments link record
  • attachmentUpdate - updates the attachments.location, removes the userattachments record, and creates the tableattachments link record
  • attachmentAddLink - creates a tableattachments link record (used for a History record)

NOTE: Currently if a server action for a 'database' action is defined a link record will be created for the new record and each attachment found in the form being updated. If this needs to be done selectively then an attribute can be added to the server action.

When a file is initially selected or dragged and dropped into the file upload component the file is upload to the server, stored in a temporary directory, and linked with the current user. When the form is submitted the file is moved to the application directory and the file is linked to the form record. If a user selects a file but leaves the page without submitting the form the file remains in the temporary storage directory and linked to the user. Whenever a user views a form containing a file upload component any files that are linked to that user are relisted in the file upload component. The user can then submit the files associating them with a form record or delete them by clicking the 'x' button displayed with the file.
NOTE: When deleting uploaded attachments by clicking the 'x' button a REST call is made to the backend to remove the attachment and the link to the user. The filename link has a href attribute that is provided by the server when retrieving the attachment as the url attribute in the JSON object.

In order to reload existing linked files for a user it is necessary to add a userattachments action for the form load event. The action data for the event/action specifies the form file upload component name. In the following example the file upload component name is 'attachment':
{"component":"attachment"}