Click on picture to upload with Reactive webapp

Currently there is an upload widget that allows us to place a button for uploading any files. But instead of that I want my users to click on the default picture to upload a new photo. How do I do that?

Hi Arun Nair,

On the click on a default user image, trigger a onclick event handler which includes a JS node with the below script and pass the upload widget Id as an input parameter to the JS node.

Code Snippet

document.getElementById($parameters.ElementId).click();

Set the Upload widget extended style property to display:none as shown below:

Check this: Sample App Screen

PFA - includes the .oml solution


Hope this helps you!


Regards,

Benjith Sam

Thanks a lot Benjith. That worked.

Arun Nair wrote:

Thanks a lot Benjith. That worked.

You're welcome, Arun :)

Glad I could be of help!


Regards,

Benjith Sam

Hi Benjith,

The above solution worked on a Reactive web app. But how do I do this on a Traditional web application? I couldn't find the run JS script action like in reactive web app but I found the RunJavaScript action under HTTPsHandler extension. But the same code doesn't work here because I'm not sure how to pass the elementId as a parameter.


Solution

Hi Arun Nair,

Sorry for the late response.

Check this: Profile Image Upload App Screen (Traditional Web App)


PFA - includes the .oml solution file (Traditional Web Application)


Hope this helps you!


Regards,

Benjith Sam

Solution

Benjith Sam wrote:

Hi Arun Nair,

Sorry for the late response.

Check this: Profile Image Upload App Screen (Traditional Web App)


PFA - includes the .oml solution file (Traditional Web Application)


Hope this helps you!


Regards,

Benjith Sam


You are just awesome Benjith. Thank you so much :) 

Arun Nair wrote:

You are just awesome Benjith. Thank you so much :) 

You're welcome, Arun :)

Thank you very much for the words of appreciation :)


Glad I could be of help!


Regards,

Benjith Sam