430
Views
15
Comments
Solved
How to get ImageURL from Entity(Binary)
Question

I have an entity which has Id, Name, Image(Binary) - How to convert from Binary Data to ImageURL - So that I can send the Image URL to Aazure cognitive services (Image URL expected there- )

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP
Solution

Hi Jamal,

The post that Venkatesh linked to works fine for Traditional (adding a Download in the Preperation), but it doesn't work for Reactive. Instead, you can leverage the fact that a REST API uses HTTP(S) just as webpages do, so you can emulate the Traditional trick.

To do so, expose a REST API with a GET method. Let's call it ImageGet. The URL then should be "images" (or "Images"). It should probably have some ImageId as input, so you can retrieve the right image from the database. Of course, you could add a GUID to your database and use that, so it's not possible to guess valid ImageIds.

The REST method should have two outputs: one is the image binary, so let's call it ImageBinary, its Data Type should be set to Binary and Send In to Body. The second parameter should be called something like ContentDisposition, and it will be used to send back the file name. It should be of type Text, Send In is Header, and Name in Response "Content-Disposition" (without the quotes).

In the REST method, you query the database. You set the ImageBinary output to the data of the image from the database, and the ContentDisposition to the following:

"attachment; filename=" + FileName

where FileName is the name of the file (from the database as well, probably).

You can test whether it works in the browser. You can find the URL by using the "Open Documentation" option in Service Studio, then expanding the GET Images/ and copying the Request URL. Don't forget to replace the {ImageId} placeholder by a valid identifier.


2023-08-28 09-08-29
Venkatesh Sundarajan

Hi Jamal,

There is a similar thread exist in forum, please check below,

https://www.outsystems.com/forums/discussion/34673/getting-image-url-from-binary-data/

Hope this helps!

2025-01-23 05-58-39
Jamal Mohammed

Thank you Venkatesh - I have seen that already - I need the url which should publically accessable : 

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP
Solution

Hi Jamal,

The post that Venkatesh linked to works fine for Traditional (adding a Download in the Preperation), but it doesn't work for Reactive. Instead, you can leverage the fact that a REST API uses HTTP(S) just as webpages do, so you can emulate the Traditional trick.

To do so, expose a REST API with a GET method. Let's call it ImageGet. The URL then should be "images" (or "Images"). It should probably have some ImageId as input, so you can retrieve the right image from the database. Of course, you could add a GUID to your database and use that, so it's not possible to guess valid ImageIds.

The REST method should have two outputs: one is the image binary, so let's call it ImageBinary, its Data Type should be set to Binary and Send In to Body. The second parameter should be called something like ContentDisposition, and it will be used to send back the file name. It should be of type Text, Send In is Header, and Name in Response "Content-Disposition" (without the quotes).

In the REST method, you query the database. You set the ImageBinary output to the data of the image from the database, and the ContentDisposition to the following:

"attachment; filename=" + FileName

where FileName is the name of the file (from the database as well, probably).

You can test whether it works in the browser. You can find the URL by using the "Open Documentation" option in Service Studio, then expanding the GET Images/ and copying the Request URL. Don't forget to replace the {ImageId} placeholder by a valid identifier.


2025-01-23 05-58-39
Jamal Mohammed

Hi Kilian
 Thank you for the solution - I will try this and confirm you the working 


2025-01-23 05-58-39
Jamal Mohammed

worked - you are a champion Kilian Hekhuis 

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Great, glad I could be of help. Happy coding!

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

For future reference: I wrote an article about how to this in some more detail.

UserImage.jpg
Syeda Muhammad Arika Masroor

Hi @Kilian Hekhuis .I am trying to get url from binary so that when i expose the api I would get the URL instead of binary data in the response because this response is going to be use in the front end website which is built in react.js and they used "src link" for image.I tried to do all the steps as you had recommended in this post but this api is crashing, it is not giving any response

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Hi Syeda,

Please take a look at my article and check whether you did all the steps (the post above is just a short version of it, the article has more explenation). One thing I notice is that you have a "ContentDisposition" output, something I didn't describe, so that's no right.

Also, you are saying your API is "crashing". Since you created this API, please debug it, so you have more information to go on than "it doesn't work". Debugging is the #1 skill every software developer should have!

UserImage.jpg
Syeda Muhammad Arika Masroor

Thanks @Kilian Hekhuis. I was able to download the files. But the thing is I don't want to download files, I need a URL of binary data that is saved in my database. So I can use it in my API response which later can be used as "src" link like we do in html. Something like this <image src="">   

P.S I am not going to use this link in outsystems app. It is going to be use externally. I am just exposing the api here with image as a URL

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Hi Syeda,

The URL is the address of the REST API + the unique number. It is explained in the article I linked above. "To see the URL that the REST method exposes, select “Open Documentation” from the REST API’s context menu."

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

You're most welcome. If you have any other questions let me know.

UserImage.jpg
Syeda Muhammad Arika Masroor


Hi @Kilian Hekhuis  .As  you said the api end point is my link.I need to use it something like this

But as can see no image is shown( I am testing through W3school).It is giving me response in the API but here it is not fetching it.

Please help me with this

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Please check your browser's console, to see if there are any errors that could explain why it's not fetching it.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.