Creating reactive forms containing file upload feature
There are different scenarios where you would need to use forms with file upload feature or functionality. Let us take an example wherein you need to maintain and capture the product-specific documentation like product image files or supporting documents like quality check report, product specifications documents, any contract specific to the product, and so on. In these scenarios you need to create an advanced form that enables users to upload any files, may it be image files, video files, pdf documents, text files, etc.
The platform provides a File Upload control that can be used to upload different types of files like images, audio & video files, text files, PDF files, etc. These files can then be stored to the sheet. To enable uploading of files you can add the File Upload control to the form, set properties to restrict files type as per requirement, and add a workflow to update it to a sheet and link the workflow to the Submit action. Make sure that you have a sheet where you can store the information.
Let us first have a quick look at how we can add the File upload feature to the control.
Here we are assuming that a sheet is already created named Prod_specs_docs with Prod_name, Prod_Image, and Supporting_docs columns. The Prod_Image and Supporting_docs columns will have Column Type as File Upload. Let us take an example to understand the process.
Adding form controls
Let us add a Text control for the Product name and File upload control for the Product image and Supporting documents .
Now let us see the properties for the Product Image first. Here we want to restrict the user to add only Image files. Assign an appropriate label for the control and under Properties set the Text as “Upload image”.
Set the Multiple files as Off if you want to upload only a single image file. However, if you want to enable the user to upload multiple images, then set the Multiple Files as On and specify the No. of files to be added. Now that we want to restrict the user to add only image files , set the File Type as Image, and you are done with the image upload feature for your form.
Now let us add the properties for the File upload control for the Supporting documents.
- Set the label and the prompt Text properties as required.
- Now we want to be able to add multiple files and also provide the close button .
- For the sake of this example let us assume that we want to allow users to add a maximum of 3 files of any type. Set the properties as follows: Multiple Files as On, No. of Files = 3, and File Type as Any.
The form design is now ready.
Adding the workflow
Now to be able to submit the data to your sheet, you need to add a workflow to this form. Select Workflow from the menu and click + (add) icon under the current Screen to add the workflow. It is important that the workflow is created under the screen where it is to be applied. Open the workflow to configure the tasks of the workflow for submitting information.
Select the task as Update Sheet and click Continue. Add a Task name and description (optional) and click Next. Here specify the sheet where the records are to be inserted and select What to do as Insert Record .
Now we need to link the columns of the sheet to the controls, under Insert Data , type the control name, that is available as suggestions representing the Uniquename for the control. The Uniquename is a unique identifier for the control and is auto-generated, based on the label name of the control when we added the controls.
Optionally you can select it from the Tasks option in the F option. To add a control, Click F and select Tasks > Initiated > Control’s Uniquename. Click Done after all columns are added. Your workflow for inserting records is now ready.
Linking workflow to the Submit action
You now need to link the Workflow to the Submit Button . In the properties of the Submit button, click Select Workflow, and link the Fileupload_workflow workflow that we created in the previous step. Now you can set the properties as required. Set the action for successful submission as required. For the sake of this example we will set it as a Popup Message.
Now you can take a preview of the form.
The uploaded files will be stored in the linked sheet.
Once you have finalized the overall form and are satisfied with its look and feel, you can Publish it so that it is accessible for organizational or public access as per your need. So you see how easy and quick it is to create your own forms to upload files of all types using our low code platform.