Skip to main content

Premium Components

Premium components include File, Nested Form, and Custom. The File component handles secure file uploads, while the Nested Form allows reusing or embedding forms inside another. The Custom component gives developers freedom to build unique fields or logic. These make forms more powerful, flexible, and suitable for complex applications.

File​

What is the File component?

The File component allows users to upload and attach files (like PDFs, images, or documents) directly into a form. It supports single or multiple file uploads, can restrict file types (e.g., only .pdf or .jpg), and set size limits. Files can be stored securely using external providers such as AWS S3, Azure, or custom servers. This component is widely used in applications where users need to submit documents, resumes, images, or reports.

How Do I Use the File Component?​

The File Component is designed to let users upload, preview, and manage files within a form. It’s a flexible tool that supports various use cases — from simple document uploads to capturing photos using a webcam or mobile camera.

🪜 Steps to Use the File Component​

  1. Add the File Component

    • In the Form Builder, drag and drop the File component onto your form.
    • It will appear as a file input where users can upload one or more files.

  2. Configure Storage

    • Open the component’s Settings → File tab.
    • Choose a Storage Provider (e.g., S3).
    • Optionally, specify a Directory to organize uploaded files.

  3. Set File Rules and Restrictions

    • Use File Types to control what kinds of files can be uploaded (e.g., image/*, application/pdf).
    • Set File Minimum Size and File Maximum Size to enforce file size limits.
    • Optionally, add a File Pattern using regex to match file names.

  4. Customize File Display

    • Enable Display as Image(s) to show image previews instead of plain links.
    • Use File Name Template (e.g., {{ name }}-{{ guid }}) to define how uploaded files are named.

  5. Enable Camera or Device Capture (Optional)

    • Turn on Enable Web Camera to let users take photos directly from the form.
    • Select which camera to use: User (front) or Environment (rear).

  6. Save and Test

    • Save your form and preview it.
    • Try uploading a file or capturing an image to confirm the configuration works as expected.

Example Use Cases​

  • User Profile Forms: Upload profile pictures with image preview enabled.
  • Document Submission: Collect PDFs or scanned documents for verification.
  • On-Site Inspections: Capture photos using the rear camera directly within the form.
  • Assignments or Reports: Allow file uploads with specific naming conventions or size limits.

Nested Forms​

The Nested Form component lets you embed one form inside another. This is useful when you want to reuse an existing form (like an address form, contact details form, or survey section) across multiple larger forms without rebuilding it each time. It supports passing data between the parent and child forms, making data collection more organized and modular.

Form Tab Settings​

Form

Select which child form you want to embed within your current form.

  • The dropdown lists all available forms from your Form.io project.
  • Once selected, the chosen form’s fields will be rendered inside the parent form.
  • Any submissions to the parent form can include data from this child form.

Example:
If you have a reusable “Address Form,” you can include it in multiple parent forms like “Employee Registration” or “Customer Onboarding” by selecting it here.

Use Original Revision while Submissions Viewing: Using this option will make form load the original revision (the one which was used to make a submission) when viewing a submission. Using this option will make form load the original revision (the one which was used to make a submission) when viewing a submission.

Save as reference: Using this option will save this field as a reference and link its value to the value of the origin record. Using this option will save this field as a reference and link its value to the value of the origin record.

How Do I Use the Nested Form Component?​

  1. Add the Component

    • Drag and drop the Nested Form component into your parent form.

  2. Select a Child Form

    • Go to the Form tab and choose an existing form from the dropdown list.

  3. Decide on Data Behavior

    • Enable Save as Reference if you want to link child submissions instead of duplicating data.
    • Use Use Original Revision while Submissions Viewing to ensure consistent version history.

  4. Save and Test

    • Save your form and preview it.
    • The nested (child) form fields will appear seamlessly inside the parent form.

Custom Component​

Custom components can be used to render special fields or widgets inside your app. For information on how to display in an app, The Custom Component allows developers to build their own form fields or widgets when the standard components are not enough. Using JavaScript, you can define how the component looks, behaves, and interacts with other form elements. This gives full flexibility to create specialized input types, validations, or dynamic behaviors tailored to unique project needs.

Click here for more information.