Use CB image path in text field instead of file field to open image

[DesiLogi]

Hi, 
My app is very image intensive and I have the user sometimes upload images to CB the normal way (in a File type field from a Submission form) and sometimes the image path/url will come from an S3 Bucket and be stored in a Text255 field. The goal is to have all image paths stored in a single field, whether uploaded by the user to CB or brought from an S3 bucket, and then use that field's file path to display images (because I often copy records and a FileType field cannot be copied without a special trigger set up by Caspio's DevOps, so I use a Text255 field for the image path). 

I can get the CB image path from the File Type field into a Text255 path, along with the S3 image paths (via formula). So that's done and I now have a single field with image file paths from either CB Upload or S3. The issue is displaying them: S3 images are fine but I can't get the images in CB to display. 

Neither <img src="[@field:Image_Text255_Field!]"/> or <img src="[@field:Image_Text255_Field/]"/> works if the image is stored in the CB account. 

Is there a way to reference images in CB from a text255 field to display them? I'd thought it would work the same as referencing a S3 image because it's just a file path and the image in CB is obviously available. Thanks for any help on this-- 

[Hastur]

Hello @DesiLogi

You can display using the URL in the Text255 only if you have one link in the field.
If you have more links, you need use JS to parse the value of the Text field, define each link and use them to append new <img /> tags with the appropriate values of links as many times as many links you have in the field.

[DesiLogi]

Sorry I got back to this so late--I didn't see the response. 

I'm not understanding this solution--there would only be 1 link in a text 255 field per record, for an image file in the CB Files section. 

What I need to do is access a file in CB Files via the file path stored in a text field (vs the File type field), and display it using <img src="fllepath" style="max-width:300px;"/>

Here's a scenario: 

1) User uploads a file called 'sofa.jpg' to a normal 'File' type data field called 'My_Image' in a submission datapage. This creates a file called 'sofa.jpg' in the Files section of my CB account. In the table 'My_Image'  = /sofa.jpg. 

I have another field, a Text255, called 'Image_Out_Url' that stores AWS image paths AND  CB Files paths.

2) user copies the record with the CB uploaded image and '/sofa.jpg' populates the new record's 'Image_Out_Url' Text255 field (because triggers don't allow copying file fields but using a formula field I can copy the file name from CB Files). So for the new record Image_Out_Url = /sofa.jpg.

3) What I need to do is be able to show the uploaded file in CB using its path  the same way I show an AWS image: in a datapage in an html block using  <img src="[@field:Image_Out_Url]" style="max-width:300px;"/>. 

If the image is in AWS then [@field:Image_Out_Url] = https://examplebucket.s3.amazonaws.com/sofa.jpg displays fine.

However, if the image is in CB Files  then  [@field:Image_Out_Url] = (something like) myaccountid.caspio.com/Files/sofa.jpg does not work. This is not the correct file path for images in CB Files.

I can't figure out how to get the path for 'sofa.jpg' if it's in CB Files. What would the file path look like for '/sofa.jpg' if it's in the CB Files section so it would work in <img src="[@field:Image_Out_Url]" style="max-width:300px;"/>?

[futurist]

Hi @DesiLogi,

May I know where do you intend to use this, are you planning to use this on a Report DataPage?

I have a workaround wherein I grab the actual URL for each of the files, and use that URL into an image tag, and I was able to display the image as it is. This would require JavaScript.

In my example I used a Tabular Report DataPage. (DP URL: https://c1hch576.caspio.com/dp/db26a0003a800e4c707f43788f7d where "My Image" field is the File field, and the "Copied Image" is an HTML block containing the URL from the My_Image field)

On the Configure Results Page Fields, make sure to include your actual File field, because we need the image to show up so we know where to grab the image URL.

Then, I added an HTML block ("Copied Image"). In here, I disabled the HTML editor and added an img tag (I also added a class called "copiedimage" because we'll need this later on in the script so we'll know where to place the URL of the image we grabbed)

 

Add a Header and Footer, then on the Footer, disable HTML editor and paste the following:

 

<script>

document.addEventListener('DataPageReady', function (event) {

var rows = document.querySelectorAll("tr[class*='cbResultSetDataRow ']");

[].forEach.call(rows, function(elem, i) {

 var pic = elem.querySelector("img").src;

elem.querySelector("img[class='copiedimage']").src =pic;

});

});

</script>

//code ends here

Where var rows = document.querySelectorAll("tr[class*='cbResultSetDataRow ']"); is responsible for grabbing all of the rows in the table.

 

The [].forEach.call(rows, function(elem, i) { ... }); goes through each of those records, looks for the image (which is the image in the My Image field), grabs the URL of that image, then pastes that onto the source of the img tag on the HTML block. That goes for each records.

 

Let me know if this works for you or if you have a different setup. You are right that we cant get the actual URL of the File per each record using the standard features; we can only get the name of the file and not the entire URL including the directory. I think Caspio did that for security purposes, not really sure. However, once we do have the actual File field, we can then look into the URL of that image, copy that, and use it anywhere else. Now, if you dont want the actual File field to show up, you can hide that as well with some additional JavaScript. Make sure that you only hide that and not the replicated image

[DesiLogi]

Hi Futurist,

Thanks for the detailed answer on this--to answer your question, I'll be using this in tabular, details, and update datapages so I need code that can work from each. 

Looking at your solution, I don't think it'll work for me because it looks like it depends on having the File-type field available so that its source can be pulled. In the cases where I need to use this I won't have the File field available with a value so I won't be able to get the file/image source. This is because the record(s) will have been copied from other records that had a File field value--and when you copy records in a trigger you're not able to copy File-type fields from one to another. The best you can do is pull the file 'name' and copy it into a Text255 field. So on that new, copied record all you have is the Text255 field with a value of the file name. That's what I'm trying to use in the case of not having a File-type field value, just a Text255 field value with the file name in it. 

[futurist]

hi @DesiLogi,

Would it perhaps work for you if you have a separate table for your main table and the files? Like youre going to have a separate table that is going to contain all of the files, each of them having a unique ID, and your main table would only have to reference the ID of the file. Then, create a View that links both of these tables together, so now each of your records on the main table would have access to the actual file and theyre going to be tied with the file ID (on the files table - this is the primary key) and a file ID (on the main table - this is a foreign key). Like so: 

 

The relationship (DesiLogi_1 table is the main table, DesiLogi_2 is the files table):

 

DesiLogi_1 table:

 

DesiLogi_2 table:

 

The View configuration:

 

Output of the View:

 

Output of the DataPage (URL: https://c1hch576.caspio.com/dp/db26a000cc6c26fd03ae48989fa3):

 

So with this, I was able to have a workaround wherein some of my records on the main table are sharing the same file on the file table.

[DesiLogi]

Hi Futurist,

Thanks for the detailed explanation--I do have this kind of solution implemented in parts of the app, images with id values linked to multiple records.  But because of how some data is submitted, the image has to be in the same table as a lot of other related data (otherwise the user would have to upload images through yet another submission form instead of at the same time as a lot of other granular data).  So when records are copied, and they need to access the same image as the original, the datapath should be copyable as well (in a trigger). But Caspio Bridge doesn't allow this, as per this thread. 

I've gotten around this by using Integromat/Make that accesses a View to filter for new (copied) records that need to share the same image.  The Scenario in Integromat takes the file path from the View and updates the related record (by an id value) in another View, pasting it into the File Path field of the Caspio table. For some reason Integromat can do this but Caspio Bridge can't, with its own tables. At any rate, this somewhat convoluted workaround does work, so a single image can be referenced by many records. Once the Integromat Scenario pastes the filepath into the image field Caspio treats it the same as if it were uploaded manually and you can use it to display in datapages as normal. 

I was looking for a simpler method that would keep the process all in Caspio Bridge but at least this method gets the job done.  Thanks for posting your response, as it is very relevent and helpful for someone setting up images to be used across multiple records. The sticking point is ease-of-use for the user to upload them without using multiple submission forms.