Display Variable Image In Datapage

[RonAnderson]

Hi, I'm getting confused as to which is the best way to display an image in my submission datapage. It's not a static image, like a logo. I have a number of items and each has its own image. When a user selects one of the items, I want the respective image to be displayed. I've looked at a number of web articles and the forum but nothing seems appropriate. If you know of a link, could you share it with me?

I've tried using the "File" element but this brings the "Remove" button and I don't want the user to be able to change the image or remove it.

The Filestor CDN is not an option for me because of the cost so I need to resolve this on my plan level which is "Explore".

Your help, as always, is greatly appreciated,

Kind regards

Ron
 

[CoopperBackpack]

Hello @RonAnderson,

Files that are stored in Caspio account are rendered in a specific way, so FileStore CDN can be helpful in this case.

Since this feature is not included in you plan, as an option, you may use third-party repository to store the images.

For example, you may use Google Drive and share access to the images. 

1) Let`s say I have a lookup table, in the 'Item_image' field I store the image URL (field has Text(255) data type):

 

2) For example, I have the 'Orders_table' to submit data into it through the Submission form:

 

3) In the 'Item' field the user can select the option from the Lookup table.

4) In the Virtual field it is possible to get the image URL:

SELECT Item_image FROM LU_Fruits WHERE ID = target.[@field:Item]

5) In the HTML block I added the img tag, specified the image width, and added the id to reference this element:

<img id="item-img" style="width: 150px; margin: 1px;" />

6) In the Footer section there is the code to get the URL from the Virtual field and to set it as the image source in the HTML block:

<script>
document.addEventListener('DataPageReady', function (event) {
  
document.querySelector('input[id*="cbParamVirtual1"]').addEventListener("change", imageHandler); // change Virtual field number if needed
   
      function imageHandler(event) {
          let calcField = event.target.value;
          document.querySelector("#item-img").src= calcField;

          document.removeEventListener('DataPageReady', imageHandler);
     }        
});
</script>

7) DataPage:

              

Maybe someone else can suggest a different solution.

Feel free to update this thread if you have any questions.

[RonAnderson]

WOW..... @CoopperBackpackYou are an absolute star. This works so well. The comms you gave is brilliant. It must have taken you a long time and I am so genuinely grateful... Thank you so much.

I wish I could return the favour but I feel I'm a few years away.

Warmest regards

Ron

[RonAnderson]

The above solution by CoopperBackPack is working really well and I'd like to go one step further by giving the user the option to make the image download or not by including a Virtual field (checked and default at False) so that if the checkbox is ticked the Image will be downloaded. I've tried amending the footer code as follows. The new line is in bold and underlined:

<script>
document.addEventListener('DataPageReady', function (event) {
document.querySelector('input[id*="cbParamVirtual12"]').addEventListener("change", imageHandler); 
   
if(document.querySelector("input[name*="cbParamVirtual13"]").checked == true){

      function imageHandler(event) {
          let calcField = event.target.value;
          document.querySelector("#item-img").src= calcField;

          document.removeEventListener('DataPageReady', imageHandler);
     }        
});
</script>

I've also tried the line in the HTML block but I just can't get it to work. Could someone please help?

Ron.

[CoopperBackpack]

Hello  @RonAnderson, 

There are some restrictions for downloading files automatically when the page and file paths have different domains.

In the solution that I suggested the file is related to google.com (for example) and the DataPage has caspio.com domain

It looks like it is possible to add the download option when the file is stored in App parameters.

How many files do you need to display (approximately)?