Cannot get local file picker to display

Hi all,

At this link here is a seemingly very handy local file picker I would like to use: https://community.plotly.com/t/file-explorer-tree-generator-for-local-files/68732?u=liuto

However, I just can’t seem to get this to work!

Here’s my initial code (I essentially just copied and pasted and threw my own path in here):

import os
from dash_iconify import DashIconify
import dash_mantine_components as dmc
from dash import Dash, html

class FileTree:

    def __init__(self, filepath: os.PathLike):
        """
        Usage: component = FileTree('Path/to/my/File').render()
        """
        self.filepath = filepath

    def render(self) -> dmc.Accordion:
        return dmc.Accordion(
            self.build_tree(self.filepath, isRoot=True),
            multiple=True)

    def flatten(self, l):
        return [item for sublist in l for item in sublist]

    def make_file(self, file_name):
        return dmc.Text(
            [DashIconify(icon="akar-icons:file"), " ", file_name], style={"paddingTop": '5px'}
        )

    def make_folder(self, folder_name):
        return [DashIconify(icon="akar-icons:folder"), " ", folder_name]

    def build_tree(self, path, isRoot=False):
        d = []
        if os.path.isdir(path):
            children = self.flatten([self.build_tree(os.path.join(path, x))
                                    for x in os.listdir(path)])
            if isRoot:
                d.append(
                    dmc.AccordionItem(
                        children=children,
                        label=self.make_folder(os.path.basename(path)))
                )
            else:
                d.append(
                    dmc.Accordion(children=[
                        dmc.AccordionItem(
                            children=children,
                            label=self.make_folder(os.path.basename(path)))
                    ],
                        multiple=True)
                )
        else:
            d.append(self.make_file(os.path.basename(path)))
        return d

app = Dash()
# FileTree.render() returns a dash mantine components Accordion

app.layout = html.Div(FileTree('/assets').render())

if __name__ == '__main__':
    app.run_server(debug=True)

I’m looking to just display my assets folder, let users pick what file they want from it. When running the code above, the webpage is simply blank with no display

I’m not incredibly familiar with Dash so please excuse my ignorance. I’m not even sure where to start troubleshooting. Any tips or tricks would be appreciated.


Edit: I’ve also tried a few different ways of representing my file path, such as

 r"C:\Users\liutony\source\repos\Dash\assets"

which gives me the following error:

[Previous line repeated 4 more times]
  File "c:\Users\liutony\source\repos\Dash\app.py", line 44, in build_tree
    dmc.AccordionItem(
  File "C:\Users\liutony\source\repos\Dash\.venv\Lib\site-packages\dash\development\base_component.py", line 446, in wrapper
    return func(*args, **kwargs)
           ^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\liutony\source\repos\Dash\.venv\Lib\site-packages\dash_mantine_components\AccordionItem.py", line 239, in __init__
    raise TypeError(
TypeError: Required argument `value` was not specified.

I’ve also tried using /Users/liuto/source/repos/Dash/assets as my filepath, and while this throws no error, the Dash webpage output continues to be blank.

I think I’ve made a little bit of progress, but the next error message I have even less of a clue how to fix.

Here’s what I’ve changed (I wrapped my app in dmc.MantineProvider()):

app.layout = dmc.MantineProvider(html.Div(FileTree('/assets').render()))

When launching the application, the previous error of “MantineProvider was not found in the component tree, make sure you have it in your app” disappears, but this new error shows up.

TypeError: r.useId is not a function

    at t.useRandomClassName (http://127.0.0.1:8050/_dash-component-suites/dash_mantine_components/dash_mantine_components.v0_14_6m1729202212.js:2:1599748)

    at http://127.0.0.1:8050/_dash-component-suites/dash_mantine_components/dash_mantine_components.v0_14_6m1729202212.js:2:1591205

    at renderWithHooks (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_18_1m1728665944.14.0.js:14938:20)

    at updateForwardRef (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_18_1m1728665944.14.0.js:16951:22)

    at beginWork (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_18_1m1728665944.14.0.js:18780:18)

    at HTMLUnknownElement.callCallback (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_18_1m1728665944.14.0.js:182:16)

    at Object.invokeGuardedCallbackDev (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_18_1m1728665944.14.0.js:231:18)

    at invokeGuardedCallback (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_18_1m1728665944.14.0.js:286:33)

    at beginWork$1 (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_18_1m1728665944.14.0.js:23338:9)

    at performUnitOfWork (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_18_1m1728665944.14.0.js:22292:14)
1 Like

You get this error due to an update of DMC. Please check the website on how to get an basic app running with DMC. They changed the imports a bit and how to include the provider component.

1 Like

Thank you, this was helpful!

1 Like