Search

Build a Multiple Upload feature in Knack using Jotform and Integromat

There is no native way to upload multiple files at once in Knack and this can lead to a poor user experience when the use case requires to upload several files. A lot of clicking and a lot of waiting.


Add this feature using custom code is far from easy. One solution I have seen shared on Knack forum works well but does not allow to connect the file to a parent record so it is pretty limited. Let's imagine the following use case, you have a project management app and you want your users to be able to upload multiple files at once on the project page, you need those files to be connected to the parent project record. It is expensive to build a solution with custom code that does this without exposing your API key.


So I have build a no-code work-around using Jotform and Integromat that works really well.


The concept: use a dynamic embed Jotform form inside of Knack, the submission triggers an Integromat scenario that upload the files in Knack and create the connection with the parent record.


Pros:

  • No-code

  • Lighting fast for the user

  • Excellent UI

  • Can be easily adapted to other form builder (Formsite, Formstack, ..)

Cons:

  • requires a paid subscription to remove Jotform branding


1. Build the form in Jotform


The form is very simple, we just need two fields. An hidden field to pass the parent record id, here our project id, and an file upload field. The record id needs to be hidden in the advanced settings of the field.



Jotform upload file overview
Jotform upload file overview


Jotform hidden field set-up
Jotform hidden field set-up

2. Set-up the backend in Knack


Things on the back-end are very easy. All you need is to create one rich text field on the parent record (in our example "Project") for which the files will be connected to. We will populate this field with the Jotform embed code when the project is created using Integromat. I will explain this in step 4.






3. Set-up the front-end in Knack


Now we need to set-up pages for the users to upload multiples files. Here there are many different setups possible. For this example I have just created a simple page that list all projects with a link to a child page with a detail view of the project. The only field in that child view is the rich text that was created in the previous step.



Knack Table Parent view
Knack Table Parent view

Builder - Detail Project view with Rich text embed
Builder - Detail Project view with Rich text embed

Upload pop-up view with Jotform embed
Upload pop-up view with Jotform embed


4. Build Scenarios in Integromat


4.1 Populate the Embed Rich Text Field on project record


The first scenario purpose is to dynamically populate the Project rich text field with the Jotform embed code that is unique to each project. The source URL for the iframe contains the value for the "recordid" field using ta pre-populated URL. If you are not familiar with this you can find more details here. so we can connect the uploaded files to the project with our second scenario when the form is submitted.


First you need to Publish in Jotform select "Iframe" and grab the code within the <iframe> html tags.

Get Jotform embed Iframe code
Get Jotform embed Iframe code

In your Integromat scenario you need a trigger, here I have selected "New record" created for the object "Project", so for every new project the rich text field will be automatically populated. After the trigger I have an "Update record" module to populate the field. Here you just need to paste the iframe code and add the pre-populated value for the "recordid" field in Jotform and map the record ID.


Scenario 1: add custom iframe code to parent record
Scenario 1: add custom iframe code to parent record

4.2 Upload files in knack and create connected records


The second scenario is triggered by a Jotform submission. Here are all the steps and their basic function:


  1. Jotform trigger to start the automation and get the form submission data

  2. Knack "Get record" to verify the record actually exists. I added a filter after so only submission with a valid record id go through

  3. Iterator: the files in the Jotform payload are in an array so we need the iterator to process the files one by one

  4. Set Variable: here I use the "Set variable" module with a split function to extract the file name from the Jotform upload url

  5. HTTP Module "Make request": the file download url given by Jotform are only accessible if logged into Jotform. To download the actual file we need to authorize the request using Jotform

  6. Knack "upload file": to actually upload the file to Knack

  7. Knack "create record": to create the project file record and populate the file field with the id obtained in step 6, populate the Project connection field so the child records are connected to the project and populate the uploaded date field.


This scenario is more complex than the previous one and requires some Integromat experience to set-up correctly.



Integromat scenario iterator http request
Scenario 2: Overview


Jotform webhook Payload
Jotform webhook Payload

Ok now let's see it in action



Important note about security:

If someone has the URL of the Jotform form and the record ID they could upload files to Knack without being logged in the app which could be a security issue. You can prevent this by adding another field in your Knack parent object and assign a unique random value to that field when the record is created. In Jotform add a second hidden field in your Jotform and add the value as URL parameter in the embed code. In your second Integromat scenario only allow the execution to go through if the "password" match.


Need help to set this up for you? Contact us :)

12 views0 comments