Using the Multiple File Upload and Download Components

Last Updated: 08/11/2016 Introduced in Verision: 2.0

The Multiple File Upload and Multiple File Download form components allow users to upload and download files to a flow. They can be found in the Toolbox tab, under the File Handling category.

Example

Our example flow will expand on a previous Apply for Financing flow. In this flow, users enter the details of a financing application. Those details are preserved in a process data folder that is saved within a Customer folder.

In our example, we will modify this flow to allow supporting documents to be added to the application. These documents will be uploaded and stored within the process data folder, where from they will also be available for download at the application approval stage.

FolderView

 

We will begin in our Designer Folder by selecting the Applicant Details Form and clicking the Edit link.

editDetailsForm

 
In addition to our pre-designed form fields, we will add a “Supporting Documents” label component and a Multiple File Upload component. We will find it in the Toolbox tab, under the File Handling category.
 

addMultipleUpload 

In the Properties tab, we will set DataName to “SupportingDocuments” and select an OutputType of FileData.

setMultiUpload

 

This completes our form, so we will save it and close the Form Designer.

saveDetailsForm

 

Back in our Designer Folder, we will select Application Approval Form and click the Edit link.

editApprovalForm

 

In addition to our pre-designed form fields, we will add a “Supporting Documents” label component and a Multiple File Download component. We will find it in the Toolbox tab, under the File Handling category.

In the Properties tab, we will set Select Button type to Link, DataName to “SupportingDocuments” and File OutputType to FileData.

setMultiDownload

 

This completes our form, so we will save it and close the Form Designer.

saveApprovalForm

 

Next, we will modify our Apply for Financing flow to use our file upload and download controls. We will navigate to the behavior actions folder for our Customer folder: System > Common Data Elements > Folder Behavior Actions > UserType.CustomerFolderBehavior. We will select the Apply for Financing flow and click the Edit link.

editFlow

 

Because we’ve modified the Application Approval Form to expect files for download, that component will be marked as invalid.

flowWithValidationIssues

 

We will begin by making space for the new parts of our flow and disconnecting the Set State and State Reason 2 step’s Done outcome from [Form] Application Approval Form. On submission of the Application Details Form, our flow should save the uploaded files to our process folder. To do this, we will begin by iterating through the uploaded files. We will find the ForEach Step component in the Toolbox tab, under the Flow Management category.

dragForEach

 

In the Collection category of the Properties tab, we will open the type selector and select FileData.

pickFileDataForEachStep

 

In the Mapping Editor, we will map SupportingDocuments to Collection and rename the Item output to “SupportingDocumentFile”.

mappingForEach

 

Next, we will add each file to our process folder. We will find the Add File component in the Flow Management > Data category of the Toolbox tab.

dragAddFile

 

In the Mapping Editor, we will map SupportingDocumentFile.Contents to data and SupportingDocumentFile.FileName to name.

mappingToAddFile

 

After every file has been added to our process folder, we would like the flow to proceed to the Application Approval Form step, so will connect the Done outcome of the ForEach Step to it.

connectSteps

 

In the Mapping Editor, we will map SupportingDocuments to SupportingDocuments and leave all other mappings unchanged.

mappingToApprovalForm

 

This completes our flow, so we will save it and close the Flow Designer.

saveFlow

 

To test our modified Apply for Financing flow, we will navigate to a Customer folder and select the Apply for Financing action.

applyForFinancing

 
In the resulting Applicant Details form, we will fill in the details of our application. To add files, we will click the Attach another file link. For this example we will add three files: “Letter of Support.docs”, “PayStub.docx” and “ProofOfResidency.docx”.
 formRunningWith3Files
 

On submission, the three files we uploaded will be added to our process folder. We can see them by opening our application’s process folder – Financing Application2 – and looking under the Resources section.

processingViewWithDocs

 
Back in our Application Approval Form, we will see our uploaded files listed in the Supporting Documents section. To download any one of them, we can click the corresponding Download link.
approvalFormWith3Files
 
 

Additional Resources