How to disable upload widget in reactive?
Question
Application Type
Reactive

Hello,

Since the upload widget doesn't have a disable property, so I tried using Javascript.

document.getElementById($parameters.InputFileId).disabled = true;

But it isn't working. Do you have any solution to this?

Cheers!

mvp_badge
MVP
Solution

Hi Esrom,

For the specified use-case, try with the below-mentioned JavaScript code.

  • Define a  JavaScript node with a single input parameter passing the Upload widget Id
  • Using the JavaScript disable the "file" type input which is defined inside the upload widget

JavaScript Snippet

var uploadWidget = document.querySelector('#' + $parameters.UploadWidgetId + ' > input');
uploadWidget.setAttribute("disabled", "disabled");


Hope this helps you!


Kind regards,

Benjith Sam

This works like magic. Thanks, Benjith!

mvp_badge
MVP

You're welcome, Esrom.

Glad to help you :)


Kind regards,

Benjith Sam

Hi Esrom,

I suggest using this component for File Upload.

https://www.outsystems.com/forge/component-overview/7405/reactfilepondupload

mvp_badge
MVP
Solution

Hi Esrom,

For the specified use-case, try with the below-mentioned JavaScript code.

  • Define a  JavaScript node with a single input parameter passing the Upload widget Id
  • Using the JavaScript disable the "file" type input which is defined inside the upload widget

JavaScript Snippet

var uploadWidget = document.querySelector('#' + $parameters.UploadWidgetId + ' > input');
uploadWidget.setAttribute("disabled", "disabled");


Hope this helps you!


Kind regards,

Benjith Sam

This works like magic. Thanks, Benjith!

mvp_badge
MVP

You're welcome, Esrom.

Glad to help you :)


Kind regards,

Benjith Sam

can any one provide me the oml

mvp_badge
MVP

Hi Sarah,

Sure, refer to the attached oml file.

JS Snippet:

document.querySelector('#' + $parameters.FileUploadId + ' > input[type="file"]').disabled = true;

Demo screen: DisableUploadWidget

I hope this helps you!


Kind regards,

Benjith Sam

RWA_Lab_DisableUploadWidget.oml

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