Getting image url from binary data

(Outsystems Mobile application)

Hi All,

         I am trying to get url from a binary data which is an image that is saved in a local database. Can someone suggest me javascript code or any other methods to get the url.

Thanks in advance.

Hello Ragul,

I am not understanding...
If the image is saved in the database, there is no "url" for it. 

Why do you need a URL for an image in local storage?
What are you trying to accomplish?

Cheers.

Solution

Hi ragul sp,

if the image is stored on local storage (on the device), the URL will likely have to be a "data:" url. Check here for an explanation of what these URLs are. You will build them by starting the URL with data:image/<format>;base64, and then appending the contents of the image (after converting the binary content to base64 you can find this functionality in the BinaryData platform extension).

If it's in a server database, you can define a screen that receives as input parameter the ID for the image, and in the Preparation fetches it from the database and ends in a Download tool. Your image's URL will be the URL for your screen plus the input parameter thats tells it which image to provide.

Solution

Eduardo Jauch wrote:

Hello Ragul,

I am not understanding...
If the image is saved in the database, there is no "url" for it. 

Why do you need a URL for an image in local storage?
What are you trying to accomplish?

Cheers.


Hi Eduardo,

                   As a challenge task I am trying to frame a url with the help of some javascript for the image saved in the local db. And I am also testing whether the framed url is working in the download file action from file transfer plugin.

Thank you

Jorge Martins wrote:

Hi ragul sp,

if the image is stored on local storage (on the device), the URL will likely have to be a "data:" url. Check here for an explanation of what these URLs are. You will build them by starting the URL with data:image/<format>;base64, and then appending the contents of the image (after converting the binary content to base64 you can find this functionality in the BinaryData platform extension).

If it's in a server database, you can define a screen that receives as input parameter the ID for the image, and in the Preparation fetches it from the database and ends in a Download tool. Your image's URL will be the URL for your screen plus the input parameter thats tells it which image to provide.

Hi Jorge,

              Thank you so much. I think i found an answer for my question and that's of great help.


Hi Ragul,

Challenge as in learning how to do? In this case, Jorge's answer is the way to go.

But you see, there is no way to a access directly, through URL, a database object. At least you will need some middle layer that will get the object.

So, in order to receive a faster answer (and possibly suggestions of better ways of dping something), It's always better to explain what you're trying to accomplish, instead of just asking how to do something :)

Cheers and good studies.

Eduardo Jauch wrote:

Hi Ragul,

Challenge as in learning how to do? In this case, Jorge's answer is the way to go.

But you see, there is no way to a access directly, through URL, a database object. At least you will need some middle layer that will get the object.

So, in order to receive a faster answer (and possibly suggestions of better ways of dping something), It's always better to explain what you're trying to accomplish, instead of just asking how to do something :)

Cheers and good studies.

Hi Eduardo,

                   Yeah I am learning to implement different concepts in Outsystems. Thank you for making the answer even more clear and whenever I have a need to ask questions again, I will implement what you said. Thanks for letting me know your suggestion to the way of asking questions. 

Jorge Martins wrote:

Hi ragul sp,

if the image is stored on local storage (on the device), the URL will likely have to be a "data:" url. Check here for an explanation of what these URLs are. You will build them by starting the URL with data:image/<format>;base64, and then appending the contents of the image (after converting the binary content to base64 you can find this functionality in the BinaryData platform extension).

If it's in a server database, you can define a screen that receives as input parameter the ID for the image, and in the Preparation fetches it from the database and ends in a Download tool. Your image's URL will be the URL for your screen plus the input parameter thats tells it which image to provide.

does this apply to Web as well?


Helios wrote:

Jorge Martins wrote:

Hi ragul sp,

if the image is stored on local storage (on the device), the URL will likely have to be a "data:" url. Check here for an explanation of what these URLs are. You will build them by starting the URL with data:image/<format>;base64, and then appending the contents of the image (after converting the binary content to base64 you can find this functionality in the BinaryData platform extension).

If it's in a server database, you can define a screen that receives as input parameter the ID for the image, and in the Preparation fetches it from the database and ends in a Download tool. Your image's URL will be the URL for your screen plus the input parameter thats tells it which image to provide.

does this apply to Web as well?


You can use this on Web as well, but what exactly is your requirement?


Jorge Martins wrote:

Hi ragul sp,

if the image is stored on local storage (on the device), the URL will likely have to be a "data:" url. Check here for an explanation of what these URLs are. You will build them by starting the URL with data:image/<format>;base64, and then appending the contents of the image (after converting the binary content to base64 you can find this functionality in the BinaryData platform extension).

If it's in a server database, you can define a screen that receives as input parameter the ID for the image, and in the Preparation fetches it from the database and ends in a Download tool. Your image's URL will be the URL for your screen plus the input parameter thats tells it which image to provide.

Do you have demo for :
"If it's in a server database, you can define a screen that receives as input parameter the ID for the image, and in the Preparation fetches it from the database and ends in a Download tool. Your image's URL will be the URL for your screen plus the input parameter thats tells it which image to provide."

Got lost in "Your image's URL will be the URL for your screen plus the input parameter thats tells it which image to provide."


I don't have a demo, but I can further explain:

  • Create an Image Entity
    • Add an attribute Content of type Binary Data;
    • Add an attribute Filename of type Text;
    • Add an attribute MimeType of type Text;
  • Create a WebScreen called FetchImage
    • Add an Input Parameter ImageId of type Image Identifier;
    • Add a Preparation
      • Drag & Drop the ImageId Input Parameter to the Action Flow
      • Drag & Drop the Download tool over the End tool (this will replace the End tool with the Download tool)
      • Fill in the properties of the Download tool:
        • Place GetImageById.List.Current.Image.Content as File Content;
        • Place GetImageById.List.Current.Image.Filename as File Name;
        • Place GetImageById.List.Current.Image.MimeType as Mime-Type;
  • If you want to obtain the Image stored with Id 5, you can use the URL:
    https://<environemnt>/<module>/FetchImage.aspx?Id=5

But if this is a Web App, you can use the Image widget directly, set its Type property to Database and its Attribute property to Image.Content. You can set its Filename to whatever file name you want the image to have when shown, and its Entity Identifier property needs to have the Id of the image you want to display (on the example above that would be IntegerToIdentifier(5)).

Jorge Martins wrote:

I don't have a demo, but I can further explain:

  • Create an Image Entity
    • Add an attribute Content of type Binary Data;
    • Add an attribute Filename of type Text;
    • Add an attribute MimeType of type Text;
  • Create a WebScreen called FetchImage
    • Add an Input Parameter ImageId of type Image Identifier;
    • Add a Preparation
      • Drag & Drop the ImageId Input Parameter to the Action Flow
      • Drag & Drop the Download tool over the End tool (this will replace the End tool with the Download tool)
      • Fill in the properties of the Download tool:
        • Place GetImageById.List.Current.Image.Content as File Content;
        • Place GetImageById.List.Current.Image.Filename as File Name;
        • Place GetImageById.List.Current.Image.MimeType as Mime-Type;
  • If you want to obtain the Image stored with Id 5, you can use the URL:
    https://<environemnt>/<module>/FetchImage.aspx?Id=5

But if this is a Web App, you can use the Image widget directly, set its Type property to Database and its Attribute property to Image.Content. You can set its Filename to whatever file name you want the image to have when shown, and its Entity Identifier property needs to have the Id of the image you want to display (on the example above that would be IntegerToIdentifier(5)).

I was able to implement what you were saying, it really is useful. BTW, since the image is displayed using URL, how do you manage "CROSS SITE (CORS)" error restriction? Do you have implementation for Allow-Control-Access-Origin related issues?


I don't think in this case there would be a CORS issue, as both the images and the applications are in the same domain, right?

I have never had to address it so far, but I believe you need to setup your Web Screen to add to the response the Access-Control-Allow-Origin header with the correct value (* for "can access from anywhere" or a specific domain if yo want to restrict access to your images to certain origins only).

Jorge Martins wrote:

I don't think in this case there would be a CORS issue, as both the images and the applications are in the same domain, right?

I have never had to address it so far, but I believe you need to setup your Web Screen to add to the response the Access-Control-Allow-Origin header with the correct value (* for "can access from anywhere" or a specific domain if yo want to restrict access to your images to certain origins only).

When I started using the Image link to other websites like other OS projects using Google Maps, I encounter that. Is this the right way of avoiding that error:

Or should I use AddHeader instead? Or did I get it wrong altogether?

Like I said, I've never had to implement that, but from I read around, it should be AddHeader. The browsers are the ones that implement the CORS check (so they need to check the header to determine what sources are acceptable).

Jorge Martins wrote:

Like I said, I've never had to implement that, but from I read around, it should be AddHeader. The browsers are the ones that implement the CORS check (so they need to check the header to determine what sources are acceptable).

Thanks, your concepts were helpful.