add a FileUpload widget based of FileInput to upload file(s) to the kernel

[glehmann]

Is it possible to upload the content of a file (or set of files) to the jupyter kernel? We have FileInput in the widgets available, but it seems restricted to the file names, not the file contents.

[glehmann]

Just for the record, ipywidget has implemented this feature for jupyterlab last summer: https://github.com/jupyter-widgets/ipywidgets/pull/2258 This is the kind of thing I'd like to do — and maybe an inspiration to implement this feature if it doesn't yet exist :)

[mariobuikhuizen]

It's possible with: https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html#File-Upload.

There is no file upload widget for ipyvuetify yet.

[glehmann]

Yes, and that's great we have this option :+1: We are currently evaluating ipyvuetify as a replacement for ipywidget so this will be quite easy to use for us. Unfortunately the look won't match the rest of the user interface, but that should do for now!

[maartenbreddels]

I think we want to have this eventually, it would be nice if we reuse the code of @jupyter-widgets/controls for this.

[MichaMucha]

I'd like to help but would need your guidance - I don't understand the typescript side of things. If it makes sense lmk, otherwise happy to wait for someone more competent to make it a reality

[maartenbreddels]

Does https://github.com/mariobuikhuizen/ipyvuetify/tree/master/examples/extra answer all your demands? It's even better than core ipywidgets we think, it provides a file like object, and avoids the Jupyter server and tornado websocket limits by streaming in chunks

[MatthieuMayer]

Hi @maartenbreddels and @mariobuikhuizen ,

I have checked and used your development of FileInput that we can find in the extra folder from the package. Great job on this one ; yet have two questions :

1. When I use the method read() on the loaded file, see below :

the cell in the notebook is stuck on 'executing' (note the asterisk instead of the cell number 4), although the read() function most likely ended since the following command that stores the file locally has completed (see the file created in the explorer left panel).

2. To respond to your question if it answers all our demands : I need to use en event on the FileInput instance to load the data automatically once the file is selected (can be a change or input event), although I believe you have not linked the FileInput widget to the VueWidget module(s) allowing to use events. Do you plan on implementing this in a near future ?
   Otherwise, what solution can we have to get the data automatically loaded once we select the file without doing any other action ?

Thanks for your work.

[mariobuikhuizen]

Hi @MatthieuMayer,

1. In the classic notebook we didn't see this issue, although output ended up in the cell of the FileInput. This is because we need to do some tricks in the kernel to be able to receive multiple messages for large file support. It does seem to finish though and the next cell can also be executed.
2. you could add an observer to the file_info traitlet;

   file_input.observe(lambda _: my_load_function(), names='file_info')

[Alexboiboi]

In the classic notebook we didn't see this issue

Hi @mariobuikhuizen,

I can confirm that it is working with the classic jupyter notebook interface but it does not seem to work with jupyterlab (I tried with v3.1).

Any Idea, how to solve this issue?

Thank you ;)

[Alexboiboi]

with the following example it works for me only in the classic notebook interface, but neither in jupyterlab nor voilà

from ipyvuetify.extra import FileInput
import ipywidgets as widgets

fi = FileInput()
out = widgets.Output()
def on_file_upload(change):
    file = fi.get_files()[0]
    data = file['file_obj'].read()
    with out:
        display(data[:100])

fi.observe(on_file_upload, names='file_info')
display(fi,out)

[mtbli]

Dear all,

I am facing the same issue as above when trying to use the FileInput object contained in a dialog object to allow the user of a voila application to upload an external file. Is there any progress done with respect to the functionality of this object in jupyter lab or voila?

[OGmenas]

Hi @mariobuikhuizen and all who are struggling with this issue,

Basically i have the same trouble as @mtbli is stuck with. I made a voila application with ipyvuetify and i need a way to upload some type of files. I tried using ipywidget fileupload as the guys from this project https://github.com/jtpio/voila-gpx-viewer And didnt work either. Is there any possibility yo see some progress with FileUpload object to solve this issue?

[maartenbreddels]

Why did the normal ipywidget file upload solution not work? That widget doesn't do anything fancy, so if that doesn't work there is a different problem I think with that (websocket message limit size of tornado triggered?)

[bobwatcherx]

Why did the normal ipywidget file upload solution not work? That widget doesn't do anything fancy, so if that doesn't work there is a different problem I think with that (websocket message limit size of tornado triggered?)

how to use in solara

import solara
import reacton.ipyvuetify as rv

@solara.component
def Page():

    def runme(change):
        if change["type"] == "change" and change["name"] == "file_info":
            print("File info changed:", change["new"])

    myfile = rv.FileInput(
        label="hide"
    )

    with solara.Column(margin=10):
        rv.Btn(
            children=[
                "clickme"
            ]
        )

    # Use the observe method on the widget containing FileInput
    myfile.observe(lambda _: runme(), names='file_info')

not work error

Traceback (most recent call last):
  File "/usr/local/lib/python3.10/dist-packages/reacton/core.py", line 1647, in _render
    root_element = el.component.f(*el.args, **el.kwargs)
  File "/home/miop/belajar/ipyvuefileupload/main.py", line 23, in Page
    myfile.observe(lambda _: runme(), names='file_info')
AttributeError: 'ValueElement' object has no attribute 'observe'

[bobwatcherx]

how to get value path of file from file input

import solara
import reacton.ipyvuetify as rv

@solara.component
def Page():

    thisfile = ""  # Initialize thisfile as an empty string

    def runme(widget, event, data):
        # Access the selected file using the thisfile variable
        selected_file = thisfile
        print("Selected file:", selected_file)

    myfile = rv.FileInput(
        label="input file",
        v_model=thisfile,  # Bind to the initialized thisfile variable
    )

    button = rv.Btn(
        color="primary",
        children=[
            "Upload"
        ]
    )

    rv.Container(
        children=[
            rv.Col(
                children=[
                    myfile,
                    button
                ]
            )
        ]
    )

    rv.use_event(myfile, "change", runme)