dcc.Loading for dcc.Upload

Dash Python
1

I am having difficulties getting a dcc.Loading to interact with a dcc.Upload. I want the loader to be visible during the duration of downloading the file. Below is my code; I do not see any loading happening. Any feedback is appreciated.

Layout Code:

html.Div([
    dcc.Loading(id='file-loader', type="default", children=[html.Div(
        dcc.Upload(
            id='upload-data',
            children=html.Div([
                'Drag and Drop or ',
                html.A('Select Files')
            ]),
            style={
                'width': '800px',
                'height': '50px',
                'lineHeight': '50px',
                'borderWidth': '3px',
                'borderStyle': 'dashed',
                'borderRadius': '5px',
                'textAlign': 'center',
                'margin': '20px',
                'borderColor':'#009900'
            },
            # Allow multiple files to be uploaded
            multiple=False
        ),),
    ]),
]),

Callback:
@app.callback(Output(“file-loader”, “children”))

2 Likes
2

Same issue here. I’d be interested to hear if anyone has solved this yet.

I worked around this issue by wrapping the component that was being updated with the uploaded file. In my case, I’m populating a graph with the data, so the graph shows the spinner when the file is uploaded.

You might be able to create a dummy Div somewhere that would give you similar behavior–it may be that the file uploader widget just won’t show the spinner for some reason.

1 Like
3

Thanks for the idea!
In my case, I needed to update dcc.Dropdown options, which also worked liked that :slight_smile: