How to show file selection dialog for server side files in JupyterLab/JupyterHub python notebook?

Question

I would like to show a file selection dialog, where users of my JupyterLab notebook can select a file from their workspace (= files on server, not from their local computer).

If I would try to use some python library (tkinter, qt), that would try to open a GUI on the server. However, I want to have a GUI on the client. Since the client runs in the browser, that GUI needs to be based on html/javascript.

Furthermore, the files to be selected are located on the server. A list of existing files can be shown with a system command (e.g. "!dir").

There seem to be widgets for file selection in JupyterLab:

https://jupyterlab.readthedocs.io/en/stable/developer/ui_helpers.html#file-dialogs

JavaScript code (requires a build step of Jupyterlab extension; FileDialog needs to be imported from @jupyterlab/filebrowser; DocumentManager needs to be injected as plugin dependency from @jupyterlab/docmanager; ):

var { FileDialog } = require('@jupyterlab/filebrowser');

const dialog = FileDialog.getOpenFiles({
  manager, // IDocumentManager
  filter: model => model.type == 'notebook' // optional (model: Contents.IModel) => boolean
});

const result = await dialog;

if(result.button.accept){
  let files = result.value;
}

=>How can I use those widgets in my python code? Is there some extra python library for doing so?

Unfortunately FileDialog does not seem to be inlcuded in ipywidgets:

import ipywidgets as widgets
print(dir(widgets))

Related:

https://discourse.jupyter.org/t/jupyterlab-file-chooser-widget-server-side/4934/3

ipywidgets

qt and tkinter

Stefan · Accepted Answer · 2021-11-06T08:46:03.253

6

As a workaround there is https://pypi.org/project/ipyfilechooser/

The file selection is not shown as extra dialog window but in the output region of the notebook cell, also see:

https://github.com/crahan/ipyfilechooser/issues/31

Installation:

pip install ipyfilechooser

Usage:

from ipyfilechooser import FileChooser

fc = FileChooser()
display(fc)

fc.selected

edited Nov 06 '21 at 08:46

answered Nov 02 '20 at 10:01

Stefan

10,010
7
61
117

score 0 · Answer 2 · answered Mar 17 '23 at 14:07

We have built a FileBrowser component in Solara that solves this problem. It shows the files on the server:

import solara
solara.FileBrowser(directory="/Users/maartenbreddels/data/", on_file_open=print)

It's a solara component, so if you want to use this in a classic ipywidgets application, use the .widget method, like:

import ipywidgets as widgets
widgets.VBox(
    children=[
        solara.FileBrowser.widget(directory="/Users/maartenbreddels/data/", on_file_open=print)
    ]
)

How to show file selection dialog for server side files in JupyterLab/JupyterHub python notebook?

2 Answers2