Loic SebeBuild 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.
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.
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.
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.
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:
Jotform trigger to start the automation and get the form submission data
Knack "Get record" to verify the record actually exists. I added a filter after so only submission with a valid record id go through
Iterator: the files in the Jotform payload are in an array so we need the iterator to process the files one by one
Set Variable: here I use the "Set variable" module with a split function to extract the file name from the Jotform upload url
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
Knack "upload file": to actually upload the file to Knack
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.
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.