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, how image quality compression can be preset in Form Builder, and how users can choose image quality while uploading images through the Image component or the File component.

NOTE: User must have permission to access Administration and Form Builder for updating default settings.

SECTION 1: IMAGE COMPONENT SETUP

Step 1: Open Form Builder

Start from the left navigation panel.

1. In the left navigation panel, expand or locate the Administration section.

2. Click Form Builder.

Figure 1: Form Builder selected from the left navigation panel under Administration

Figure 1: Form Builder selected from the left navigation panel under Administration

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. Open the required form from the Form Builder list or create a new form where the image field must be added.

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

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 required details.

4. Click Save to add the Image component to the form.

Figure 3: Image component Basic tab with Label, upload settings, Property Name, and Save option

Figure 3: Image component Basic tab with Label, upload settings, Property Name, and Save option

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 configuration area opens with additional tabs such as Appearance, Behavior, and Conditional.

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

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 the required quality value based on the expected image clarity and file size requirements.

5. Click Save to apply the preset image quality to the component.

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

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. Click Save to apply the setting.

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

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

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. Open the required screen and start creating or editing a record.

2. Go to the Image field on the form.

3. Click Browse to select an image from your computer or drag and drop the image into the upload area.

4. Use the image quality dropdown beside Browse to select the required quality, such as Full HD, HD, SD, 40%, 50%, 60%, or 70%, depending on the available configuration.

5. Upload the image and continue with the record submission process.

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

Figure 7: 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.

Figure 8: File component upload area with Drop files to attach, or browse option

Figure 8: File component upload area with Drop files to attach, or browse option

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

In the File component, the image quality dropdown appears only after a file is attached and before the file is uploaded.

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-u, and then click Upload.

Figure 9: File component image quality pop-up with options to apply the setting to the current upload or all images

Figure 9: File component image quality pop-up with options to apply the setting to the current upload or all images

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 allows administrators to add a dedicated image upload field to Effivity forms. The compression function helps preset or select image quality so users can balance clarity, upload speed, and file size. Image quality can be configured in Form Builder and can also be adjusted during upload where the screen provides the quality dropdown.

Relevant Articles