For Zoho Services only:


I'm actually part of something bigger at Ascent Business Solutions recognized as the top Zoho Premium Solutions Partner in the United Kingdom.

Ascent Business Solutions offer support for smaller technical fixes and projects for larger developments, such as migrating to a ZohoCRM.  A team rather than a one-man-band is always available to ensure seamless progress and address any concerns. You'll find our competitive support rates with flexible, no-expiration bundles at https://ascentbusiness.co.uk/zoho-services/uk-zoho-support.  For larger projects, talk to our experts and receive dedicated support from our hands-on project consultants at https://ascentbusiness.co.uk/zoho-services/zoho-crm-implementation.

The team I manage specializes in coding API integrations between Zoho and third-party finance/commerce suites such as Xero, Shopify, WooCommerce, and eBay; to name but a few.  Our passion lies in creating innovative solutions where others have fallen short as well as working with new businesses, new sectors, and new ideas.  Our success is measured by the growth and ROI we deliver for clients, such as transforming a garden shed hobby into a 250k monthly turnover operation or generating a +60% return in just three days after launch through online payments and a streamlined e-commerce solution, replacing a paper-based system.

If you're looking for a partner who can help you drive growth and success, we'd love to work with you.  You can reach out to us on 0121 392 8140 (UK) or info@ascentbusiness.co.uk.  You can also visit our website at https://ascentbusiness.co.uk.

Zoho Deluge: Get Image Uploaded in Creator Form

What?
So this is an article to document the methods I use to get an image uploaded in a form to display in a report or on another page.

Why?
There might be different articles out there and discussion forums that do cover this but it takes me so long to find the solution with the right syntax.

How?
So I'm going to start with 1 method and then update this article with other methods.

Method #1: Display and access without login
So the quickest is to have a form that has an image upload field. Create an entry with one image. Then...
  1. Go to Settings
  2. Publish
  3. Publish Component > Select your report
  4. Copy the embed code it pops up with to your clipboard
  5. Paste this into a browser
  6. Right-click on the image you want and inspect the element, this will have the SRC which is the publicly accessible version that you want.
Now you can use that value in your HTML.

Method #2: Using Deluge
Assuming that I have a form called "MyImages" and an image upload field that has the field link name "MyImage". There is an additional single-line text field called "Name". I have added an entry with name "Logo" and I have uploaded an image accordingly.
copyraw
// change this to eu (Europe), com (US), com.cn (China), ...
v_TLD = "eu";

// my creator form
f_MyImages = MyImages[Name == "Logo"];
v_Filename = f_MyImages.MyImage.getSuffix("/image/").getPrefix("\"");

// specify publish key of published report (not the form)
v_PublishKey = "AAAAABBBBBCCCCDDDDEEEFFFGGGGHHHIIIJJJKKLLLMMMNNOOOPPPQQWRRRSSTTUUVVWWXXYYZZ122345567890";

// build image src
v_ImageSrc = "https://creator.zoho." + v_TLD + "/file" + zoho.appuri + "MyImages_Report/";
v_ImageSrc = v_ImageSrc + f_MyImages.ID + "/MyImage/image-download/" + v_PublishKey;
v_ImageSrc = v_ImageSrc + "?filepath=/" + v_Filename;

// yields something like https://creator.zoho.eu/file/myaccount/myapp/MyImages_Report/12345678901234567890/MyImage/image-download/AAAAABBBBBCCCCDDDDEEEFFFGGGGHHHIIIJJJKKLLLMMMNNOOOPPPQQWRRRSSTTUUVVWWXXYYZZ122345567890?filepath=/2138123687628736_MyLogo.png
  1.  // change this to eu (Europe), com (US), com.cn (China), ... 
  2.  v_TLD = "eu"
  3.   
  4.  // my creator form 
  5.  f_MyImages = MyImages[Name == "Logo"]
  6.  v_Filename = f_MyImages.MyImage.getSuffix("/image/").getPrefix("\"")
  7.   
  8.  // specify publish key of published report (not the form) 
  9.  v_PublishKey = "AAAAABBBBBCCCCDDDDEEEFFFGGGGHHHIIIJJJKKLLLMMMNNOOOPPPQQWRRRSSTTUUVVWWXXYYZZ122345567890"
  10.   
  11.  // build image src 
  12.  v_ImageSrc = "https://creator.zoho." + v_TLD + "/file" + zoho.appuri + "MyImages_Report/"
  13.  v_ImageSrc = v_ImageSrc + f_MyImages.ID + "/MyImage/image-download/" + v_PublishKey; 
  14.  v_ImageSrc = v_ImageSrc + "?filepath=/" + v_Filename; 
  15.   
  16.  // yields something like https://creator.zoho.eu/file/myaccount/myapp/MyImages_Report/12345678901234567890/MyImage/image-download/AAAAABBBBBCCCCDDDDEEEFFFGGGGHHHIIIJJJKKLLLMMMNNOOOPPPQQWRRRSSTTUUVVWWXXYYZZ122345567890?filepath=/2138123687628736_MyLogo.png 

Additional Note
Just as a note to do the reverse: upload an image given a URL to an image field (prerequisite: enable the field to allow Image as "Link" not just "Local Computer" or "Camera"):
Zoho Creator: Upload to Image Field - Enable Link
copyraw
for each  r_Image in m_Product.get("images")
{
    if(!isnull(r_Image.get("src")))
    {
        if(isnull(v_MainPhoto))
        {
            v_MainPhoto = "<img src='" + r_Image.get("src").getPrefix("?") + "' alt='"+r_Image.get("alt").replaceAll("'", "")+"' />";
            info v_MainPhoto;
            // yields: <img src='joels-test-image.jpg' alt='joels test image'/>
            input.Main_Photo = v_MainPhoto;
        }
    }
}
  1.  for each  r_Image in m_Product.get("images") 
  2.  { 
  3.      if(!isnull(r_Image.get("src"))) 
  4.      { 
  5.          if(isnull(v_MainPhoto)) 
  6.          { 
  7.              v_MainPhoto = "<img src='" + r_Image.get("src").getPrefix("?") + "' alt='"+r_Image.get("alt").replaceAll("'", "")+"' />"
  8.              info v_MainPhoto; 
  9.              // yields: <img src='joels-test-image.jpg' alt='joels test image'/> 
  10.              input.Main_Photo = v_MainPhoto; 
  11.          } 
  12.      } 
  13.  } 

Category: Zoho :: Article: 724

Credit where Credit is Due:


Feel free to copy, redistribute and share this information. All that we ask is that you attribute credit and possibly even a link back to this website as it really helps in our search engine rankings.

Disclaimer: Please note that the information provided on this website is intended for informational purposes only and does not represent a warranty. The opinions expressed are those of the author only. We recommend testing any solutions in a development environment before implementing them in production. The articles are based on our good faith efforts and were current at the time of writing, reflecting our practical experience in a commercial setting.

Thank you for visiting and, as always, we hope this website was of some use to you!

Kind Regards,

Joel Lipman
www.joellipman.com

Related Articles

Joes Revolver Map

Accreditation

Badge - Certified Zoho Creator Associate
Badge - Certified Zoho Creator Associate

Donate & Support

If you like my content, and would like to support this sharing site, feel free to donate using a method below:

Paypal:
Donate to Joel Lipman via PayPal

Bitcoin:
Donate to Joel Lipman with Bitcoin bc1qf6elrdxc968h0k673l2djc9wrpazhqtxw8qqp4

Ethereum:
Donate to Joel Lipman with Ethereum 0xb038962F3809b425D661EF5D22294Cf45E02FebF
© 2024 Joel Lipman .com. All Rights Reserved.