how to access local image resources on file system from a html code in OutSystems

how to access local image resources on file system from a html code in OutSystems

  

Hi,

I'm using a html code (e.g.  <img src="/img/image1.gif" alt="" style="border: none;" border="0">) to be rendered on a webscreen using HTML web block of WebPatterns/Development.

The html code contains a image reference which points to runtime path from Images folder (e.g. /img/image1.gif). I need to refer to image on local filesystem as I can't import all of the images to OutSystems. The html code may be like this:  <img src="C:\Local\Users\Desktop\image1.gif" alt="" style="border: none;" border="0">

Please also consider the video embedding from local filesystem as well.

How can I do that? Need immediate help. 

Hi Som,

Please consider using the FileSystem forge component. Be careful when doing this, if your Environment has multiple front-end servers, the servers' filesystems may be different, and there's no way the platform can guarantee files will be in the same places on all front-ends... If that's the scenario, the Network FileSystem component might be a better fit.

Hi,

Not sure what you mean by local filesystem...

if it's the servers filesystem (where the platformserver is installed) you should do Jorges way.

if it's actually the user's local filesystem it's actually very forbidden, because browsers are sandboxed (or at least they should be), but you might try <img src="file://c:\Local\Users\...Image.gif'>


J. wrote:

Hi,

Not sure what you mean by local filesystem...

if it's the servers filesystem (where the platformserver is installed) you should do Jorges way.

if it's actually the user's local filesystem it's actually very forbidden, because browsers are sandboxed (or at least they should be), but you might try <img src="file://c:\Local\Users\...Image.gif'>


Hi J,


I actually meant the servers filesystem where the platformserver is installed or may be a network directory.

I've tried <img src="file://c:\Local\Users\...Image.gif'> this doesn't work.

Need something similar to point to the image source correctly.

Thanks,

Som


Jorge Martins wrote:

Hi Som,

Please consider using the FileSystem forge component. Be careful when doing this, if your Environment has multiple front-end servers, the servers' filesystems may be different, and there's no way the platform can guarantee files will be in the same places on all front-ends... If that's the scenario, the Network FileSystem component might be a better fit.

Hi Jorge,


Thanks for your reply.

But can you give some example, as how to embed the image source in the html if I use the forge component you mentioned.

I actually need something similar to <img src="file://c:\Local\Users\...Image.gif'> and this should vary w.r.t the server on which the OutSystem is installed or any network directory like "\\OSWINAPPDEV\FileStorage\Image.gif"

Thanks in advance,

Som


Well, in that case you should do Jorges way.

and some kind of trick.

the img-src should be poiting to a page in your espace, for example 

<img src="https://yourserver/yourespace/Image.aspx?file=Image.gif">

then in that Image you have no content, just a preparation

2 things:

fetch the binary data with networtkfilesystem

instead of the end-node you do the download-node 


Som,

Let us know how you solved your requirement and if you followed a different approach please share it here so others can benefit from your knowledge too. Don't forget to mark the approach you followed as a solution to this post, so it's easier for forum members to find it.

If you still have issues with this specific topic feel free to discuss them here, and we'll try our best to help you.

Solution

Hi,

As a solution, we are embedding a rest webservices request as image source something like: 

<img src="https://<server url>/<rest service>/rest/resource/image?path=/Folder1/image1.png" alt="" onerror="this.onerror=null;this.src='http://<server url>/<rest service>/rest/resource/image?path=/Folder1/image1.png';" style="border: 2px dotted #6a6a6c; padding: 5px; width:auto; height:auto; max-width:100%; max-height:100%">

The rest service exposed returns the image from the path specified.

This solved the purpose.

Thanks,

Som

Solution

Thanks Som, that was very helpful!

Can you elaborate what's the advantage of setting up a REST service like you did vs. the solution J. described above?

Jorge Martins wrote:

Thanks Som, that was very helpful!

Can you elaborate what's the advantage of setting up a REST service like you did vs. the solution J. described above?


Hi Jorge,

In my case there are around 200+ folders and each of them have multiple images.

Bringing all of them to outsystems would have been a very crude and unrefined design.

Also there was a possibility where we can just replace the image from filesystem.

Here using a rest webservice to get that image prevented us the deployment each time we would have done if imported to OutSystems. And also loosely coupled the filesystem and the image source from the OutSystems platform.

Hope this explains the approach taken for this implementation.

Thanks,

Som

Hi Som, and thank you for the explanation.

So you set up a REST service outside OutSystems. And if I understand correctly your concerns, you didn't because you didn't want to put your images on the Database?... But, my suggestion of using the FileSystem component would avoid that, as you'd be accessing the images from the filesystem directly, not the database.

J.'s explanation described how to implement the REST method you came up with, but without resorting to multiple languages/technologies... should be a better approach for maintainability while keeping the loose coupling you desired.

Jorge Martins wrote:

Hi Som, and thank you for the explanation.

So you set up a REST service outside OutSystems. And if I understand correctly your concerns, you didn't because you didn't want to put your images on the Database?... But, my suggestion of using the FileSystem component would avoid that, as you'd be accessing the images from the filesystem directly, not the database.

J.'s explanation described how to implement the REST method you came up with, but without resorting to multiple languages/technologies... should be a better approach for maintainability while keeping the loose coupling you desired.

Hi Jorge,

Using the FileSystem was not an option as I've already described the scenario in my 1st post. i.e.

I'm using a html code (e.g.  <img src="/img/image1.gif" alt="" style="border: none;" border="0">) to be rendered on a webscreen using HTML web block of WebPatterns/Development.

The html code contains a image reference which points to runtime path from Images folder (e.g. /img/image1.gif). I need to refer to image on local filesystem as I can't import all of the images to OutSystems. The html code may be like this:  <img src="C:\Local\Users\Desktop\image1.gif" alt="" style="border: none;" border="0">


Thanks,

Som


The FileSystem (or the Distributed FileSystem) component is exactly the solution to the scenario you described, it allows you to access the filesystem directly from within Outsystems.

Your images would only be stored on your 200+ folders, you'd manage them directly through whatever operating system tools you use (Windows Explorer, for instance), and the Image web screen described by J. would just fetch the image from the filesystem by it's path and send the binary data back, just like your REST method is doing:

<img src="https://yourserver/yourespace/Image.aspx?file=/Folder1/image1.png">

Hi Jorge, 

Can we use filesystem component inside the rendered pages' html code. I strongly believe NO. 

Here I'm using HTML web block. And the html code contains some image references. Which is rendered by using the rest service as "src" property. 

I don't think the file system components can be accessible from inside the html code,  rest aside the image rendering part. 

Hope it explains. 

Thanks, 

Som

Why do you say you need the FileSystem component inside the rendered pages' html code??...

  1. You use J.'s solution and create a GetImage Web Screen that on the preparation uses the FileSystem component to fetch an image based on a path passed as input parameter and returns that binary file.
  2. Then, on your screens, you just add a regular Image widget (or use your custom HTML web block) and use something like "https://<your_server>/<your_espace/GetImage.aspx?path=/some/path/to/image.png" on the src attribute.

It's a straightforward replacement of your REST method, but implemented in OutSystems and without much effort, I don't see anything wrong with this approach, and you stay within the platform which, in general is better for maintainability.

Hi Som,

I did an example for this post that implement 3 ways to fetch images from database, including a REST method and a WebScreen method. 

In this last one, you only need to do as Jorge and J. stated, and instead of doing like I did (fetching from database), use the FileSystem to fetch from the path.

I used to set the background image in a CardBackground widget, but you can use to show the image as you wish, including using a normal image or a custom img from an expression.

You can see the result here: https://eduardojauch.outsystemscloud.com/CardBackgroundWithDatabase/Home.aspx?_ts=636419665531389391

Cheers,
Eduardo Jauch