Hi guys, I am building a multi-page app by Dash. I used the framework in https://dash.plot.ly/urls (Structuring a Multi-Page App). On one page, I want to do file upload, after I select the files, the page will show filenames that selected, and after hitting the submit button, the program will do some process of the data and display result. The code is like following:
layout = html.Div([
html.Div(html.H6('Please select files you want to upload:', style={'font-size':'15px','font-weight': 'bold'})),
html.Hr(),
html.Div([dcc.Upload(['Drag and Drop or ', html.A('Select a File')],
id='upload-file',
multiple=True),
html.Button('Submit', id='button')]),
html.Div(id='to-be-upload-display'),
html.Hr(),
html.Div(id='content-display')
])
@app.callback(
Output(‘to-be-upload-display’, ‘children’),
[Input(‘upload-file’, ‘filename’)])
def display_title(list_of_names):
print(“enter display_title”)
if list_of_names is not None:
children = [html.Div(html.H6(“To be uploaded files:”))]
file_list = [
html.Div([html.H6(name)]) for name in list_of_names
]
children.extend(file_list)
return children
@app.callback(
Output(‘content-display’, ‘children’),
[Input(‘button’, ‘n_clicks’)],
[State(‘upload-file’, ‘contents’),
State(‘upload-file’, ‘filename’)])
def display_content(n_clicks, list_of_contents, list_of_names):
print(“enter function1”)
if list_of_contents is not None:
print(“enter function3”)
children = [html.Div(html.H6(“File Content:”))]
content_list = [
parse_contents(c, n) for c, n in zip(list_of_contents, list_of_names)
]
children.extend(content_list)
return children
The issue is everytime I run the app, only first callback works, there is no response after I hit the button. Does anyone know what the issue is?
Thanks a lot!