File Button Component click event


I am using a "File Button" component to upload csv files that can be fairly large (~100mb). I do not parse the values. I have a "Change" event handler set to run a javascript query, which performs some minor functions before triggering an S3 upload. I have "Loading" on the button set to true when the javascript is running. While this works with smaller files, I have two issues when using larger files:

  1. There can be a significant delay between when I choose the file and when my javascript running check starts returning true. Because of that, it's not clear to the user that something is happening
  2. I'm getting an error that fileButton.values[0] is undefined in the javascript query, which shouldn't be the case as the reason it is running is because it was triggered on the "change" function of the file button

Really appreciate any help or suggestions. For (1) I was wondering if there's a way to set loading on the button based on an "onclick" event that could be sooner than the "change" but wasn't able to figure out how to do that. For (2) I'm wondering if it is somehow a timing issue and considered introducing a time delay, but that felt pretty inelegant.

Please let me know additional info needed


Hello, just hoping someone might have some ideas, would really appreciate the help!

Hi, I also experienced this issue and it seems like a timing issue because it only happens sometimes. Most often when you double click on the file when browsing.

I created a separate file input component and use an additional action button to trigger the query (rest service post) to upload the file. This seems to avoid the timing issue.

1 Like

Hi @clocke, I don't see an on click event on the file buttons :disappointed: I'll put in a feature request!

The timing issue is interesting :thinking: @clocke In your case, is it consistent?

If you put a debounce on the event, does it work? This may not be a great solution, but it would help confirm if it's simply a matter of timing.