Note: The report from the Store Images form will be published to obtain an encrypted key. This key will be used within a function to facilitate image previewing.

1. Create forms with the following fields to upload images and temporarily store the uploaded images for previewing.
   
2. Publish the report of the Store Images form. In our case, it will be All_Store_Images.
   
   
   
3. Create a function to download the image for preview with the following details.
   
4. Add the following script to the Deluge editor. This will get the URL of the image to preview it dynamically.
   
1. string getimage(int id)
   
2. {
   
3.  imageRecord = Store_Images[ID = id];
   
4.  if(imageRecord.count() > 0)
   
5.  {
   
6.   //Fetch the image record ID and path.
7.   imageRecordId = imageRecord.ID;
   
8.   imageRecordPath = imageRecord.Temp_Image;
   
9.   subStringStart = imageRecordPath.lastIndexOf("image/") + 6;
   
10.   subStringEnd = imageRecordPath.lastIndexOf("\" border");
    
11.   imagePath = imageRecordPath.subString(subStringStart,subStringEnd);
    
12.   img = "https://creator.zohopublic.com/<adminUserName>/<appLinkName>/<reportLinkName>/" + imageRecordId + "/<fieldLinkName>/image-download/<encryptedKey>/" + imagePath;
    
13.  }
    
14. return img;
    
15.     }

1. Substitute the variables in the preceding script with pertinent data, as indicated in the table provided below.

   <adminUserName>	is the username of the person who owns the application.
   <appLinkName>	is the link name of the application.
   <reportLinkName>	is the link name of the published report.
   <fieldLinkName>	is the link name of the field that stores the uploaded images temporarily.
   <encryptedKey>	is the unique key that is generated while publishing the page. It can be located within the URL of the published report. For example, in the following publish URL: https://creatorapp.zohopublic.com/zylker/it-asset-tracker/report-perma/All_Store_Images/nDm8eJMv4TTKMd1qOZnqA0Je8dj90rW0CbQZBBPZxZd6fM02GmuUnPa962bDKWPXmnJ8vEMdF7rpWgM3jhRb6SR8kd213G2b4nbt the encrypted key is as follows: nDm8eJMv4TTKMd1qOZnqA0Je8dj90rW0CbQZBBPZxZd6fM02GmuUnPa962bDKWPXmnJ8vEMdF7rpWgM3jhRb6SR8kd213G2b4nbt

5. Create a page with a name Image Preview and add the following page variable. 

Variable Name	Data Type
image_preview	string

6. Drag and drop the ZML snippet element into your page.
   
7. Add the following script to the Deluge editor. This script will retrieve the record ID from the page variable input and then pass it to the getImage function for display.
   
1. <%{
   
2.    input.image = thisapp.getimage(input.image_preview.toNumber());
   
3.     %>
   
4. <panel elementName="Panel">
   
5.      <pr width='fill' height='fill'>
   
6.        <pc padding='20px' bgColor='#FFFFFF' width='100%' hAlign='center' vAlign='middle'>
   
7.          <pr width='auto' height='auto'>
   
8.            <pc>
   
9.              <image color='#FFFFFF' bgColor='#2D2D2D' width='500px' height='400px' type='weburl' value='<%=input.image%>' size='38px' cornerRadius='0px' iconType='outline' /> </pc>
   
10.          </pr>
    
11.        </pc>
    
12.     </pr>
    
13.     </panel>
    
14. <%
    
15. }%>
8. Create a workflow to execute on user input of the subform View field to preview the image.
   
   
9. Add the following script to the Deluge editor.
   
1. if(row.Image != null)
   
2. {
   
3.     //add your image to Store_Images
   
4.     add_images = insert into Store_Images
   
5.     [
   
6.         Added_User=zoho.loginuser
   
7.         Temp_Image=row.Image
   
8.     ];
9.     //Get last record from Temp_Images
   
10.     last_added = Store_Images[ID != 0] sort by Added_Time desc;
    
11.     //Populate the images new record ID into the rows look up field
    
12.     row.LookupID=last_added.ID;
    
13.     //Assigning the specific ID to a variable
    
14.     img = Store_Images[ID == row.LookupID].ID;
    
15.     if(img != null)
    
16.     {
    
17.         //opening the page with the record ID and page parameter
    
18. openUrl("#Page:Image_Preview?image_preview=" + img,"popup window","height=auto,width=auto");
    
19.     }
    
20. }
10. To hide the ID lookup field in the subform, create another workflow on load of the Upload Images form. Set the record event as Created or Edited and name the workflow as Hide field.
    
    
11. Click Add New Action and enter the following script in the Deluge editor.
    
1. hide SubForm.LookupID;
12. To delete the temporarily stored images in the Store Images form, create a workflow on successful submission of the Upload_Images form. Set the record event as Created or Edited and name the workflow as Delete Temp Images.
    
    
13. Click Add New Action and enter the following script in the Deluge editor.
    
1. delete from Temp_Images[ID != 0];

See How It Works

Related Links

1. openUrl
   
2. Add records