How to properly hide all elements until a file is uploaded

Dash Python
1

As the title suggests, I’m looking for a way to hide away the rest of my dashboard (e.g., header, text boxes, (and later on) plots). At the moment, this is my attempt so far

from dash import Dash, dcc, html
from dash.dependencies import Input, Output, State

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    dcc.Upload(
        id='upload-file',
        children=html.Div([
            'Drag and Drop or ',
            html.A('Select Files')
        ]),
        style={
            'width': '99%',
            'height': '60px',
            'lineHeight': '60px',
            'borderWidth': '1px',
            'borderStyle': 'dashed',
            'borderRadius': '5px',
            'textAlign': 'center',
            'margin': '10px'
        },
        # Do not allow multiple files to be uploaded
        multiple=False
    ),

    html.Div(
        id='post-upload',
        children=[
            html.Div(id='display-file', style={'textAlign': 'center'}),

            dcc.Input(id='input1', type='number', placeholder='input1', debounce=True),

            dcc.Input(id='input2', type='number', placeholder='input2', debounce=True),

            dcc.Input(id='input3', type='number', placeholder='input3', debounce=True),

            dcc.Input(id='input4', type='number', placeholder='input4', debounce=True)
        ],
        style={'display': 'none'}
    )
])

@app.callback(Output('post-upload', 'style'),
              Input('upload-file', 'contents'))
def show_hide_element(file_contents):
    if file_contents is not None:
        return {'display': 'block'}

@app.callback(Output('display-file', 'children'),
              Input('upload-file', 'filename'))
def update_output(file_name):
    file_name_return = html.H4([
        html.Span('Using file ', style={'color': 'black'}),
        html.Span(file_name, style={"color": "red"})
    ])
    return file_name_return

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

My hope was that everything inside of the ‘post-upload’ div will stay hidden until a file is uploaded. However, that is not the case as every element listed shows up when I run the above script. Is what I want to do possible?

2

Hi @henrybilliot52, you could show a full screen spinner. Not exactly what your asking for, though.

1 Like
3

Hi,

I got it to do what I want after looking at the GitHub link in your response. I didn’t know about prevent_initial_call previously, but by setting that to true in the show_hide_element() function, everything was hidden until a file is uploaded. Thanks!!

1 Like
4

Perfect, glad you figured it out! :confetti_ball:

2 Likes