Understanding Image Fields in Zoho Creator
Before diving into scripting, it's essential to comprehend how Zoho Creator manages image fields.An image field allows users to upload images either from their local computer or by specifying an image URL.Key configurations include:
- Alt Text:Provides alternative text when the image isn't displayed.
- URL:Specifies a link to navigate when the image is clicked.
- Title:Displays a tooltip when hovering over the image.
- Target:Determines whether the link opens in the same window or a new one.
These settings enhance the accessibility and interactivity of your application.
Method 1: Uploading Images from a Local Computer
To facilitate image uploads from a local computer:
Add an Image Field to Your Form:
- Drag and drop the Image field into your form builder.
- Name the field appropriately (e.g., "Product Image").
Configure Field Properties:
- Set the 'Browse Options' to 'Local Computer'.
- Define 'Alt Text', 'URL', 'Title', and 'Target' as needed.
User Interaction:
- Users can upload images directly from their devices when filling out the form.
This method is straightforward and ideal for scenarios where users provide images during data entry.
Method 2: Setting Image SRC Using Deluge Scripting
In cases where images are stored externally, and you need to set the image source dynamically, Deluge scripting comes into play.Consider the following approach:
Enable Image Field to Accept URLs:
- Ensure the image field is configured to accept links, not just local uploads.
Use Deluge Script to Set the Image URL:
- Utilize a Deluge script to assign the image URL to the image field.
Here's an example script:

Method 3: Retrieving Uploaded Image SRC for Display
If you need to display an image that a user has uploaded via a form, follow these steps:
Publish the Report Containing the Image:
- Navigate to 'Settings' > 'Publish' > 'Publish Component'.
- Select the report that contains the image field.
Obtain the Embed Code:
- Copy the generated embed code and paste it into a browser.
Extract the Image SRC:
- Right-click on the displayed image and inspect the element to retrieve the SRC attribute.
This method provides the direct URL of the uploaded image, which can be used elsewhere in your application.