Jump to content
  • 0

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


DesiLogi
 Share

Question

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-- 

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

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;"/>?

Link to comment
Share on other sites

  • 0

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)

image.thumb.png.a6dcc0c0d1d12b0df1148074b15e36f4.png

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)

image.png.01a88aa7800609525e8a50ee209ef57f.png

 

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

Link to comment
Share on other sites

  • 0

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. 

Link to comment
Share on other sites

  • 0

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):

image.png.3de78cd30275020162dbff85a588f000.png

 

DesiLogi_1 table:

image.png.1cc12937dabbf8cbf1c94c7cb3760aa0.pngimage.png.4e0704894ade3bc08c6c43f62f44bd6e.png

 

DesiLogi_2 table:

image.png.2b2193e201cfbd12c5561885d1d97a2b.pngimage.png.4f4382d446898efbc0593d9606a3c109.png

 

The View configuration:

image.png.c8153b470e46b3e78731ed7d7fa3aed4.png

 

Output of the View:

image.png.badbc9cabd3a32e53bff7df74b4c2fe6.png

 

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

image.thumb.png.a9505aa1afeef23c13c1142bc18463c0.png

 

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.

Link to comment
Share on other sites

  • 0

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. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...