Upload picture using File Upload widget and display the picture

Hi guys,

I'm uploading a picture using File Upload widget(drag and drop),I want to display the picture uploaded to different section of the screen...I looked at related posts in the community but couldn't find a solution for this.My application is web: v 11....anyone with an idea please help.

Thanks in advance.

Regards,

Siseko

Hi  

Please check attached OML. I have used a upload widget and also one image widget. When we will upload any photo it will get displayed in image. You can use these two things in two different section

Hey Lovely,

Thanks for your response but I want when you upload a picture to appear in several areas/sections of the screen...what I mean is Upload picture once,store it to local variable then display the picture  in another section of the same screen.

Regards

Hi siseko,

why you need to save in variable if you wants to use that image in different section you can do it with my logic only.

you just need to use image in different section. And if you wants to show at many place you can show it.

I tried to have two separate images but didn't work for me...I would love if you can send me an OML where you upload picture once and picture displayed in two different spot in  the same screen.

Regards,

Siseko

Hi,

I have attached the OML. Please check for two you have to change script little bit.

This is script section just open it

Solution

Hi Siseko,


See if is this that you are looking for:

https://joao-delgado.outsystemscloud.com/Photo/Empty.aspx?_ts=637111436890438496

I used a local variable to hold the image as you requested. Therefore, the image is not in the DataBase. 

Best regards,

João Delgado

Solution

Thank you guys for your responses...much appreciated....its working now with Delgado suggestion.

Regards,

Siseko

Hi Siseko,

I am not sure if this fits your requirements, but I have created a forge component which integrates the FilePond upload library.  It currently works with traditional web, and will soon have a reactive web version.

This component will display the image as it is uploading, if the file is an image.

https://www.outsystems.com/forge/component-overview/5543/filepondupload

I hope this helps.  If it does not fit your needs, nevermind. I just thought there was a chance it could save you some effort.

Kind regards,

Stuart

João Delgado wrote:

Hi Siseko,


See if is this that you are looking for:

https://joao-delgado.outsystemscloud.com/Photo/Empty.aspx?_ts=637111436890438496

I used a local variable to hold the image as you requested. Therefore, the image is not in the DataBase. 

Best regards,

João Delgado


So everything is working fine but I noticed that the image placeholder(widget) is not showing during runtime...I would like to see an image placeholder on the screen...I tried to add width and height on the widget on design time but couldn't come correct...anyone with an idea how to go about this one please.

Regards

Siseko

Hi Siseko,

I dont understand with not showing at run time. Its showing once you will upload any image.

If you wants to show it by default also without any image then check oml


Lovely Priyadarshini wrote:

Hi Siseko,

I dont understand with not showing at run time. Its showing once you will upload any image.

If you wants to show it by default also without any image then check oml


Yes I wanted to show it by default...Thanks Lovely its working now


Siseko,

The image can be inside an if that is only displaying a picture when there is an available picture.

To define the placeholder as you say, you should put an image in the false branch of the if.

Or, Follow lovely's example.


Best regards,


João Delgado