Populate Image component from two different sources

💬 App Building
1

I have an image component (image4) that I need to populate from two different sources:

  1. fileButton for image upload (used then to store in SQL database)

  2. SQL query to display stored image

If I assign the File object using the fileButton to load from my computer:

{{ fileButton1.value[0] }}

It works fine.

If I assign the File object as an object using the SQL query data to display stored image:

{
"name": "{{SQL_GetImages.dataArray[0].Imagename1}}",
"type": "{{SQL_GetImages.dataArray[0].Imagetype1}}",
"sizeBytes": {{SQL_GetImages.dataArray[0].ImagesizeBytes1}},
"base64Data": "{{SQL_GetImages.dataArray[0].Imagebase64Data1}}"
}

It too works fine.

But if I want to create an object using either method as input data source:

{
"name": {{ window.SQLFaceImageName }},
"type": {{ window.SQLFaceImageType }}",
"sizeBytes": {{ window.SQLFaceImageSize }},
"base64Data": {{ window.SQLFaceImageData }}
}

It doesn't work even though the data structure looks the same as using either the methods listed above.

If I fiddle with the object data, the image will then appear. I assume that's because the data needs to be refreshed in some way.

Is this a known bug? Is there a solution or work-around?

Any help will be greatly appreciated. Thank you.

2

Hello and thank you for posting your question.

If I understand you correctly you want to use a single image component to display an image from EITHER source "Files Upload" component or a DB row.

I might need more details here, but you can have something like this in the Image component value (make sure to select "JS Object"):

{{ fileButton1.value.length > 0 
  ? fileButton1.value[0] 
  : {
  "name": "{{SQL_GetImages.dataArray[0].Imagename1}}",
  "type": "{{SQL_GetImages.dataArray[0].Imagetype1}}",
  "sizeBytes": {{SQL_GetImages.dataArray[0].ImagesizeBytes1}},
  "base64Data": "{{SQL_GetImages.dataArray[0].Imagebase64Data1}}"
} }}

Another thing to verify is the "base64Data" that's is the most important part of the image, the other 2 property are just text, so make sure the "base64Data" is a valid Base64 string.

Hope this helps!
Let me know what happens and have a nice day!

3

I tried it and it didn't work.

What I did was use the Javascript to insert the image data from the SQL query:

image
image986×300 30.4 KB

I then apply the global object array ( populated by SQL query and when a file is uploaded):

image
image356×690 29.1 KB

I set the file upload to populate the image by URL:

image
image327×724 31.8 KB

First by a bogus value of "#" Then buy the global object array with a 1200 debounce delay (found that hack somewhere on-line):

image
image681×903 90.8 KB

The works but I have to upload the image twice to load (first time populates the retoolFileObject, the second time updates the image itself).

In other words, I'd like the image window to populate what was saved in the database but change the image if the user chooses to change the image and update the database with the new image.

Note: I tried using the global object in place of the two data input methods and that too didn't (object structure look exactly the same but wouldn't load).

Any help will be appreciated. Thank you!

4

I figured it out. I had the same issue with a two-source data input for a drop down for which I found a solution, so I circled back to try it on this multi-data input issue for an image component that I was having.

The solution is to make the data into objects like you suggested but how to do where the two input data sources are formatted the same.

I created a VARIABLE GUI window (called ImagesOnPC) and placed the fileButton1 value into it (need the [0] index value or it won't work).

{{fileButton1.value[0]}}

I created another VARIABLLE GUI window (called ImagesQuery) and placed the Query values into it. (again, need the [0] index value or it won't work).

{
"name": "{{SQL_GetImages.dataArray[0].Imagename1}}",
"type": "{{SQL_GetImages.dataArray[0].Imagetype1}}",
"sizeBytes": {{SQL_GetImages.dataArray[0].ImagesizeBytes1}},
"base64Data": "{{SQL_GetImages.dataArray[0].Imagebase64Data1}}"
}

Finally, I added them to the TERNARY operator expression within the image4 component (JS tab):

image
image337×207 7.3 KB

Your help did get me thinking about a solution to which I thank you!