Decode #1 : How to Show an Image Instantly Once Uploaded in Zoho Creator?

Yuvaraj Kumar
Dec 19, 2024
2 min read

Many times, clients request the ability to view an image instantly after it is uploaded into an image field. Unfortunately, Zoho Creator does not offer this functionality by default. However, with a simple workaround, you can make this possible.

Let’s consider a scenario where you have a form, Form A: Timesheet, which has the following fields:

Name
Email
In Time
Selfie (Image field)
View Image (Notes field)

Note: The "View Image" is a Notes field. Make sure to add this Notes field to your form because it is essential for displaying the image instantly after uploading.

Step 1: Create a Dummy Form

Create Form B: Image Viewer (Dummy), a dummy form that will only hold the uploaded image. This form needs just one field:

Image (Image field)

Step 2: Upload Selfie and Display the Image Instantly

When someone fills out Form A: Timesheet, they need to upload a selfie. To instantly show the uploaded image, you can insert the image into Form B (Image Viewer) and use the Record ID from Form B to generate the image URL.

Step 3: Add Code in On User Input of Selfie Field

To achieve this, write the following code in the On User Input workflow of the Selfie field in Form A:

if(input.Selfie != null && input.Selfie != "")

{

create_image = insert into Image_Viewer_Dummy

[

Added_User = zoho.loginuser

Image = input.Selfie

];

}

This code will insert the uploaded selfie into Form B: Image Viewer (Dummy) and return a Record ID, which is stored in the variable create_image.

Step 4: Generate the Image URL

Now, using the create_image Record ID, you can generate the image URL. Add this to the same On User Input workflow:

/*** Image URL ***/

get_dummy_rec = Image_Viewer_Dummy[ID == create_image ];

image_url = “https://creatorexport.zoho.com/file" + zoho.appuri + "Image_Viewer_Dummy_Report/" + get_logo.ID + "/Image/image-download?filepath=/" + get_dummy_rec.Image.getSuffix("image/").getPrefix("\"")”;

/*** Display Image ***/

input.View_Image = "<img src=' " +image_url+ " ' style='width:200px;' />";

The image URL is embedded inside the <img> tag, which is then placed into the View Image (Notes Field). This will display the uploaded image instantly within the form.

Full Code Example (On User Input of Selfie Field)

Here’s the complete code to show the image instantly once uploaded:

if(input.Selfie != null && input.Selfie != "")

{

create_image = insert into Image_Viewer_Dummy

[

Added_User = zoho.loginuser

Image = input.Selfie

];

get_dummy_rec = Image_Viewer_Dummy[ID == create_image ];

/*** Image URL ***/

/*** Display Image in Notes Field ***/

input.View_Image = "<img src=' " +image_url+ " ' style='width:200px;' />";

}

Delete the Dummy Records by adding the below code on Create - Success :

delete from Image_Viewer_Dummy[ID != null];

Conclusion:

By following this simple trick, you can make the image instantly viewable once uploaded in Zoho Creator. This method gives clients the ability to preview their uploaded images, adding a user-friendly touch to your application.