S
Solara•3mo ago
SeoulSKY

How to add an event listener to reacton.ipyvuetify.FileInput?

The following code correctly renders the FileInput component. 
import solara
from reacton import ipyvuetify as rv

@solara.component
def Page() -> None:
  uploader = rv.FileInput(on_v_model=lambda e: print(e))

  uploader.on("click", lambda e: print(e))
  uploader.on("change", lambda e: print(e))
import solara
from reacton import ipyvuetify as rv

@solara.component
def Page() -> None:
  uploader = rv.FileInput(on_v_model=lambda e: print(e))

  uploader.on("click", lambda e: print(e))
  uploader.on("change", lambda e: print(e))
However, selecting a file doesn't trigger any lambda functions. I want to call an event listener when a file is selected. Does anyone know how to add a listener properly?
3 Replies
SeoulSKY
SeoulSKYOP•3mo ago
I realized this is a way to add a listener 
rv.use_event(uploader, "change", lambda a, b, c: print(a, b, c)
rv.use_event(uploader, "change", lambda a, b, c: print(a, b, c)
Where a is the uploader object, b is “change”, and c is {} However, I still couldn't figure out how to get the file object from the event listener.
MaartenBreddels
MaartenBreddels•3mo ago
Yes, that is a bit tricker, that's why we build https://github.com/widgetti/ipyvuetify/blob/master/ipyvuetify/extra/file_input.py Also, the solara filedrop is built on top of this idea. Does this help you?
GitHub
ipyvuetify/ipyvuetify/extra/file_input.py at master · widgetti/ipyv...
Jupyter widgets based on vuetify UI components. Contribute to widgetti/ipyvuetify development by creating an account on GitHub.
SeoulSKY
SeoulSKYOP•3mo ago
I tried the FileDrop component from Solara, and I found its features are limited (e.g. styling and click to upload). So, I tried the rv.FileInput(), which has more features, but it wasn't implemented properly in ipyvuetify, and that was why it didn't give any value to the listener. As a result, I created my custom FileDrop with Vue, which works perfectly (I'm glad that Solara supports creating Vue components!) Thank you for the help anyway!

Did you find this page helpful?