How to disable a button (submit) while uploading a file?

Hi all,

I need to disable or hide an upload button (submit method) while the file is uploading, because there are people that click twice to do upload while file is uploading, so sometimes the file is uploaded twice.

Would anyone have a solution to help me?

The application is TRADITIONAL WEB.


Regards

Solution

There are some ways of doing that.

Look at this post, they put a timeout to avoid clicking

https://www.outsystems.com/forums/discussion/47929/how-to-disable-button-after-single-click-in-outsystems/

I am still looking for more solutions, but you can try this one.

And there is also some forge components where you can see if you can use something

https://www.outsystems.com/forge/component-overview/2579/button-locker

https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=6864&ProjectName=Anti+Spam+Click+-+OS+UI

Kind Regards,

Márcio

You can do it like this, where you use a variable to disable the button, when you click for the first time on submit you put the boolean variable to false, when the upload is finished you enable it again by putting it to true. Dont forget the ajax refresh on the elements to see everything happening.

This solution is reactive, but you can do the same thing as traditional, the only difference is you need ajax refresh to see the button state changing.

https://www.outsystems.com/forums/discussion/70175/button-disable-submit/

Kind Regards,

Márcio

Hi Marcio, thanks for answer. I tried this before but it doesn't work because the button is Submit method, so I can't use ajax refresh to disable button with a boolean variable, as I need to upload a file, I need to use submit method.


Would you have another option to solve it?

Solution

There are some ways of doing that.

Look at this post, they put a timeout to avoid clicking

https://www.outsystems.com/forums/discussion/47929/how-to-disable-button-after-single-click-in-outsystems/

I am still looking for more solutions, but you can try this one.

And there is also some forge components where you can see if you can use something

https://www.outsystems.com/forge/component-overview/2579/button-locker

https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=6864&ProjectName=Anti+Spam+Click+-+OS+UI

Kind Regards,

Márcio

Hi Marcio, sorry for the delay.


This option using JS in the onclick button properties works but it doesn't seem to be the best option but it works

"var e=this;setTimeout(function(){e.disabled=true;},0);return true;"


The other options don't work;

Button locker seemed to be the best option but doesn't work, I don't know why.

Another component is just to OS UI, and I don't use that.


I'll mark your answer as a solution, but please if you find out another way I can use it, please reply to this comment.


Thanks for the help, best regards.

Dairon

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