Image component and Images in Files and compression functions

Posted By Effivity Team

on Jun 19, 2026

Improve Workflow &
Profitability with Superior
Integrated Management
System Software

Image Component, Images in Files, and Compression Functions in Effivity

Knowledge Base Article | Form Builder and File Upload Configuration

Applies to: Effivity administrators and users with Form Builder or record creation access

ABSTRACT

This guide explains how to add and configure the Image component in Effivity forms, preset image quality for Image and File components, and select image quality during upload. Administrators configure the form inside its existing process in sandbox, then save, test and publish the changes to make them live in the main account.

NOTE: Administrators need access to the required process and its Form settings in sandbox. Users need permission to create or edit records in the relevant module.

SECTION 1: IMAGE COMPONENT SETUP

Step 1: Open the Form in Sandbox

Open the form within its existing process in sandbox. This example uses the Asset process and an optional Instrument Image field.

1. In the main account, open Admin > Process and select Switch to Sandbox. Confirm the SANDBOX banner before editing.

Figure 1a: Administration Process page showing Switch to Sandbox.

Step 1 (continued): Select the Form

2. Locate the required existing process, open its row action menu and select Edit.

3. In Artifacts, expand Form and select the required form. If the form preview opens, select Edit beside its heading to open Form Builder.

Figure 1: Asset form selected in the sandbox Artifacts workspace, with Edit beside its heading.

Step 2: Open a Form for Configuration

You can either edit an existing form or create a new form based on your configuration requirement.

1. Select the existing form under Form and choose Edit beside its heading. To create a form for this process, use the plus control beside Form.

2. Use the left component panel to find the required component.

3. Search for image in the component search box for quicker access or locate Image under Special Components.

Figure 2: Image component located through the component search box under Special Components

Step 3: Drag and Drop the Image Component

After locating the Image component, drag it from the component panel and drop it into the required section of the form layout.

1. Place the component in the required column or section of the form.

2. The Image component settings window opens for configuration.

3. Enter the label and upload limits, and review the Property Name. Keep an existing field’s Property Name unchanged when updating it. This example uses Instrument Image, a 10 MB upload limit and a maximum upload count of 10.

4. Select Save in the component window to add the component to the form. Save the whole form after completing its settings.

Figure 3: Image component Basic settings with Label, upload limits, Property Name and Save.

IMPORTANT: Configure the label and other required settings before saving the component.

Step 4: Open the Advanced Settings

The Advanced tab contains additional configuration options for the Image component.

1. In the Image component settings window, click Advanced.

2. The Advanced area opens with Appearance, Behaviour and Conditional tabs.

Figure 4: Advanced tab available in the Image component settings window

SECTION 2: COMPRESSION FUNCTION FOR THE IMAGE COMPONENT

Step 5: Preset the Image Quality in Form Builder

Effivity provides an Image Quality (%) option to preset the image quality for images uploaded through the Image component. This helps control compression automatically based on the selected quality value.

1. Go to the Advanced tab of the Image component settings window.

2. Open the Appearance tab.

3. Locate the Image Quality (%) field.

4. Select a quality value that balances image clarity and file size. The example uses 60%. Check a representative image before adopting the value.

5. Select Save in the component window, then Save on the form. Complete the sandbox testing and publication described below before users upload images in the main account.

Figure 5: Image Quality (%) option under Advanced > Appearance for the Image component

SECTION 3: IMAGE QUALITY FOR THE FILE COMPONENT

Step 6: Configure Image Quality for the File Component

In addition to the Image component, Effivity also provides image quality selection for images added through the File component.

1. Open the File component settings window in Form Builder.

2. Go to Advanced.

3. Open the Appearance tab.

4. Select the required Image Quality (%) value, where applicable.

5. Select Save in the component window, then Save on the form. Follow the save, test and publish sequence below.

Figure 6: Image Quality (%) option available in File component Advanced settings

Save Test and Publish the Form

1. Select Save in each component window, then Save on the whole form. Reopen the form and confirm the Image field and quality settings have persisted.

2. In the process Artifacts workspace, select Start Testing. Create or edit a realistic sandbox record and check image upload, the preview and the selected quality. Test the File component’s quality control before Upload. Verify that the record saves with its attachments.

3. Return to the same process in Artifacts and select Publish. Wait for the Process Publish Wizard to load. Review and retain the intended existing access selections, then select Publish Now and confirm Yes.

Publish the changes to make it live in the main account.

4. After publication finishes, select Back to Main Account. Reopen the module and verify the published field, default image quality and upload behaviour before users rely on the change. Repeat this sequence for later configuration changes.

Figure 6a: Process Publish Wizard showing Publish Now and Back to Main Account.

SECTION 4: UPLOADING IMAGES AND CHANGING QUALITY ON THE SCREEN

Step 7: Upload an Image through the Image Component

Users can upload images directly from the record creation or edit screen. The Image component provides a Browse option and a quality dropdown beside it.

1. In the main account, open the required module and create or edit a record using the published form.

2. Go to the configured image field on the form; Instrument Image is used in this example.

3. Choose the required quality beside Browse before selecting a new image.

4. Click Browse to select an image from your computer, or drag and drop it into the upload area. The available quality choices include Full HD, HD, SD, 40%, 50%, 60% and 70%.

5. Wait for the image preview and file details to appear, then continue with the record submission process.

Figure 7: Example Image upload area showing Browse and image quality dropdown options

IMPORTANT: If the image quality is changed after an image has already been uploaded, the updated quality applies only to newly uploaded images. Existing uploaded images are not updated automatically.

Step 8: Add Images through the File Component

The File component allows users to attach images and other files. Images can be selected using the “Drop files to attach, or browse” option.

1. Go to the File component section on the form.

2. Click Drop files to attach, or browse, or drag the file into the upload area.

3. Select the required image file from your computer.

4. After the file is attached, review the file name, size, status, and available actions before uploading.5. Select the individual Upload button or Upload all, then wait for Uploaded before submitting the record.

Figure 8: Asset record during sandbox testing, showing the Files upload area and three uploaded attachments.

Step 9: Choose Image Quality Before Uploading from the File Component

For an image attached through Files, the quality control appears in Actions while the file is Pending upload. Set the quality before uploading.

1. Attach the image file using the File component upload area.

2. Before clicking Upload, open the quality dropdown in the Actions area.

3. Select the required image quality.

4. Choose whether the selected quality should apply only for this upload or for all images.

5. Click Save in the image quality pop-up, then click the individual Upload button or Upload all. Wait for Uploaded before submitting the record.

Figure 9: Asset record during sandbox testing, showing image-quality options in Files before upload.

IMPORTANT: Once the file is uploaded, the quality selection option will no longer be available for that uploaded file. Select the required quality before uploading.

SUMMARY

The Image component gives a form a dedicated image upload field. Administrators configure image quality inside the existing process in sandbox, save the component and form, test the result, then publish the changes to make them live in the main account. Users can select image quality during upload where the screen provides that control; changing the quality does not recompress existing uploads.

Relevant Articles