Web App: clearValue() not working correctly

+1 on this, can't clear value of fileInput using an event handler

Any Update on this? I have this same issue with a WebApp.

Can't clear it after submit, very disturbing. Please fix it.

No update on the mobile component yet, I'll pass along any information as soon as I have it.

@cpetersonx I'm able to clear the value in the web app. Can you share what you are doing?

This JS code seems to work:
Screenshot 2024-03-27 at 1.38.45 PM

Hi @joeBumbaca. Just checked it again in the web app.
I created separate JS Runner and after running this code you can see that the attached file is still showed in the file input component and it is saved as a parsedValue so the table still shows parsed file data.

In addition, I found another new issue. For some reason, file upload input works great for all Retool Editors, but doesn't work for Retool Viewers. They click on it, but nothing is happens. It is some new bug, that wasn't exist before. Can you please take a look on it?

Hey @MichaelT, still unable to reproduce either of those issues. Are you using Retool's cloud offering or are you self hosted? If self hosted, can you share what version? Can you send over a copy of your app so that I can take a look. Clearing the value and using the component as a Viewer (ie : ''Use" access to the app) is currently working with my setup.

Hi @joeBumbaca, thanks for purpose. I created a new module and investigated this more deeply together with our QA. Here are some findings:

  1. When I created a new module and added table with fileInput the clearValue was working perfectly.
  2. When I added the New Retool Modal component and moved table and fileInput inside the modal - clearValue doesn't work anymore. When I moved table and fileInput back outside of the new Modal it still doesn't work. Seems like the new Modal affects fileInput component. Please check the attached exported module. You will find there both Main table + fileInput and modal with those components.

File upload with new modal.json (39.8 KB)

@joeBumbaca we are using Retool cloud solution. Regarding Viewer/Editor issue - few more users reports about that. So I tried to check it too with the module I created for tests and got the same results. When they clicks on the file input button nothing happens. If they drag'n'drop file to the fileInput it gets the data. Very strange.

We checked together with QA guy that has the same Viewer issue, and found that in Safari it works as expected. The issue relates to Chrome browser. Perhaps, it relates to some browser differences.

I have Chrome Version 122.0.6261.129 (work as expected)
QA has Chrome Version 122.0.6261.111 (doesn't work)

It will be helpful if you will check this issue too.

Hey @MichaelT Thanks for the module export. Definitely saw that it wasn't working there, but was unable to reproduce the issue anywhere else. I deleted the fileInput in your app and replaced it with a new one and it works as expected. If you replace that component, do you see the same on your end?

As you noted for the other issue, that was a Chrome bug. Updating Chrome resolves the issue.

Hi @joeBumbaca. Yes, I created a new file input and added all related to logic to the new one and I see that clearValue works as expected this time. Very strange. Thanks for your help!

1 Like

I'm having a similar problem on the web and here's what I've noticed. If I add a brand new file input and try to do clearValue() on it, then it clears just fine. If I delete one of my "old" file inputs and rename the new one I just created to the same name, then clearValue() doesn't work. Technically, it does work. If you look at the state, the value is empty, but the file name persists.

I have a lot of JS going on that deals with those file inputs and tables that include those file names, but I have no idea why they would persist for those fileinputs that are mentioned in queries or tables, but not new ones.

I also have the same issue on my web app (cloud, not self-hosted): I can clear the stored value, but the selected file is still displayed in the file input.

Any possible workarounds?


I've been told by our Retool enterprise support people that this is a bug, but no timeline for when it will be fixed. There doesn't appear to be a workaround...and I've certainly tried everything.

Hey all, just wanted to separate out those having issues with clearValue in a web app vs mobile.

@alexcolleva @jrich, mind sending over an export for a web app where this is happening? As noted above, adding a new fileInput and adjusting the references to that new component has solved this for others. We are still unable to get a web app / fileInput into this state, so exports of apps where this is occurring would help us narrow down what's failing.

I 100% tried replacing the buggy file inputs with new ones and they worked fine until I changed the name to my old file input. And then they had the same issue. However, this seems to not be the case anymore.

Glad that seemed to work for you @jrich. Thanks for the update.