Image does not update on UI
Application Type
Reactive
Service Studio Version
11.11.15 (Build 48647)

Hi Guys,

OML Attached.

I have a use case where user can select an image from laptop (using Upload Widget) or select an image from a stock library (this is a popup with a block pulling images from an entity and returning the selected image binary in an event).

Both cases work fine and the preview image on the main page is showing either the uploaded one or the selected stock photo.

However, when you select from laptop and then change to a stock photo, the preview doesn't update anylonger.

It looks like the DOM isn't updated because in the debugger I can see that the image variable is holding the changed binary.

Created a small OML so you could quickly replicate the issue.
Is this an Outsystems bug, is there a workaround?


PS: I changed it so the block only replies the stockphotoID and loaded the binary from the main screen, this does not help. The only thing that helps is adding a link to the UI that when pressed resets the image variable (nullbinary()) (Adding this in the action flow does not help, you have to execute it seperately)

Thanks for your feedback!

ImageIssue.oml

mvp_badge
MVP
Solution

Hi Christoph,

If you re-upload the SAME image again from your system, the Upload widget won't invoke the OnChange event. So, in order to make it work, you will have to manually reset the File type input value of the Upload widget to null or blank, as mentioned in the forum post link shared below.

Refer to these forum post:


I hope this helps you!


Kind regards,

Benjith Sam

@Christoph Newe I send in attach my last version. Hope it works, if not I will solve it.

ImageIssue-20211015.oml

Hi Christoph Newe,

I think the issue is because you need to reset the variable the show the image.

I have made some changes in your OML, you can test here:

https://personal-gxzlvs5j.outsystemscloud.com/ImageIssue/

I also share the OML.

Hope it helps,

Nuno R

ImageIssue.oml

Hi @Nuno Ricardo Rodrigues 

thanks for looking into it. I checked on your demo URL but it doesn't work for me.

Have you tried uploading an image from your laptop and afterwards changing to a stock photo? If you do it in this sequence the preview image doesn't upade (at least on my client - Chrome Version 94.0.4606.71  

Hi Christoph Newe,

It´ s not nothing related to the browser.

I haven't done the correct tests.

I try to find a solution, but without success, I will continue, and if I find a solution I will tell you.

Hope it helps,

Nuno R


  

Hi Christoph Newe

I don't know why, but it´ s necessary to have a timeout to render the image.

I think now it´ s working:

https://personal-gxzlvs5j.outsystemscloud.com/ImageIssue/

I send the OML in attach.

Hope it helps,

Nuno R

ImageIssue.oml

mvp_badge
MVP

Hi Christoph,

I do have a workaround to suggest for this issue. Sorry! I don't have the technical reason to state why this issue is occurring. 

Solution: In the image widget, instead of referring to the binary content, refer to the uploaded file Data Url

See this sample screen: SelectPhoto

Refer to the attached .oml file


I hope this helps you!


Kind regards,

Benjith Sam

ImageIssue.oml

Hi @Benjith Sam @Nuno Ricardo Rodrigues 

thank you again. I checked and unfortunately both solutions are not 100% working.

Meanwhile I believe it is a Chrome / Windows issue because try this:

1. Upload an image from your laptop
2. Select an image from the stock library
3. Reupload the SAME image again from your laptop -> Doesn't show on UI (however you see the binary in the debugger)
4. Upload a different image from your laptop -> Now it's working again

I think Chrome believes this image was already uploaded and skips it somehow (at least in the UI because the debugger is showing the new binary data of Step 3


Hi Christoph Newe,

Do you try my link in your browser? I have the same version and it works, see the video:

https://watch.screencastify.com/v/Hh3l4JkZgmQ6Nj3FqmSY

Hope it helps,

Nuno R

It works because you uploaded the bottle in between the "ocean" picture from your laptop.

Try: 1. ocean picture 2. stock photo 3. ocean picture

Hi Christoph Newe,

It works:

https://watch.screencastify.com/v/vZJE4bp4HByg6d5VblSI

What is your operating system? Just check and my chrome version (Version 94.0.4606.81 (Official Build) (64-bit) ) as a little difference for ours, but it´ s not supposed to have differences so important.

Hope it helps,

Nuno R

Hi Christoph Newe,

Don't forget to empty cache.

Best Regards,

Nuno R

Hi @Nuno Ricardo Rodrigues we keep misunderstanding ourselves :D

1. Upload an image from your laptop
2. Select an image from the stock library
3. Reupload the SAME image again from your laptop 



Hi Christoph Newe,

You are right, I don't understand the part of the SAME, sorry about that. Let me try to see again.

Best Regards,

Nuno R

mvp_badge
MVP
Solution

Hi Christoph,

If you re-upload the SAME image again from your system, the Upload widget won't invoke the OnChange event. So, in order to make it work, you will have to manually reset the File type input value of the Upload widget to null or blank, as mentioned in the forum post link shared below.

Refer to these forum post:


I hope this helps you!


Kind regards,

Benjith Sam

Hi Christoph Newe,

I confirm the solution from Benjith Sam works.

You can test here:

https://personal-gxzlvs5j.outsystemscloud.com/ImageIssue/SelectPhoto

Send the OML in attach.

Hope it helps,

Nuno R

ImageIssue.oml

Thank you so much guys! Looks like all scenarios are covered now!

Wouldn't be possible without your help! Thanks again

mvp_badge
MVP

You're welcome, Christoph.

We are glad to help you :)


Kind regards,

Benjith Sam

@Nuno Ricardo Rodrigues I imported your .oml and deployed as is but it does not work :(

Would you mind checking if you uploaded the latest version? I don't  know what else it could be.

@Christoph Newe I send in attach my last version. Hope it works, if not I will solve it.

ImageIssue-20211015.oml

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