In developer tools I get this strange error:
dash_renderer.v1_2_2…646652.dev.js:30766 Uncaught (in promise) ReferenceError: An invalid input object was used in an
Inputof a Dash callback. The id of this object isupload-dataand the property iscontents. The list of ids in the current layout is[tabs-main, tabs-content, toast-div, session-id, nocid-modal, nocidchecklist, nocid-modal-close-button, error-modal, error-message, error-message-close-button]
Layout:
UPLOAD_BUTTON = html.Div([
dcc.Upload(
id='upload-data',
children=html.Div([
'Drag and Drop or ',
html.A('Select Files')
]),
style={
'lineHeight': '80px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '6px',
'textAlign': 'center',
'margin': '10px'
},
multiple=False,
),
html.Div(id='output-data-upload'),
])
# UPLOAD_BUTTON is used in following tab layout
tab_files_layout = html.Div([
html.Div([
dcc.Input(id='tab-files-identification', value='tab-files', readOnly=True, style={'display': 'none'}),
html.Div([
html.P(
'Upload your files here.'),
dcc.Loading(html.Div('', id='upload-wait-div', style={'display': 'none'})),
], style={'marginLeft': '30%', 'marginRight': '30%', 'textAlign': 'center', 'height': '50px',
'marginTop': '2%'}),
]),
html.Div([
html.Div([
dash_table.DataTable(id='files-table', columns=[{'name': 'Your Files', 'id': 'filename'}],
data=[
# {'filename': 'example.pdf'},
],
row_deletable=True,
style_as_list_view=True,
style_data_conditional=[
{
'if': {'row_index': 'odd'},
'backgroundColor': 'rgb(248, 248, 248)'
}],
style_cell={'textAlign': 'left',
'fontFamily': 'Open Sans, HelveticaNeue, Helvetica Neue, Helvetica, Arial, sans-serif',
'overflow': 'hidden',
'textOverflow': 'ellipsis',
'maxWidth': 0},
style_header={'textAlign': 'center', 'fontSize': '1.5rem'},
style_table={'maxHeight': '405px', 'overflowY': 'scroll'}
)
], style={'height': '415px'}),
html.Div([
UPLOAD_BUTTON,
], style={'float': 'center', 'bottom': '30%', 'left': '40%', 'right': '40%'}),
], style={'margin': '5% 30% 20% 30%'}),
html.Div([
html.Div([
html.H6('Error', id='upload-error-message'),
html.Button('Close', id='upload-error-close-button')
], style={'textAlign': 'center'}, className='modal-content'),
], id='upload-error-modal', className='modal', style={'display': 'none'})
])
The callback:
@app.callback(
[
Output(component_id='upload-error-modal', component_property='style'),
Output(component_id='upload-error-message', component_property='children'),
Output(component_id='files-table', component_property='data'),
Output(component_id='toast-div', component_property='children'),
Output(component_id='upload-wait-div', component_property='children')
],
[
Input('session-id', 'children'),
Input('upload-data', 'contents'),
Input('upload-error-close-button', 'n_clicks'),
Input('files-table', 'data_previous'),
Input('tab-files-identification', 'value')
],
[
State('files-table', 'data'),
State('upload-data', 'filename'),
]
)
def update_files_table(session_id, upload_data, error_close_button_nclicks,
data_previous, _, data, filename):
if ack_upl_files_error(session_id, error_close_button_nclicks):
return {'display': 'none'}, '', data, '', filename
[...]
Now the strange thing is that everything on the page works correctly, i.e. uploads work, I’m getting contents of upload-data all right, etc.
Can this thing cause problems somewhere? Is there something I can do to fix that?
Full error:
dash_renderer.v1_2_2…646652.dev.js:30766 Uncaught (in promise) ReferenceError: An invalid input object was used in an `Input` of a Dash callback. The id of this object is `upload-data` and the property is `contents`. The list of ids in the current layout is `[tabs-main, tabs-content, toast-div, session-id, nocid-modal, nocidchecklist, nocid-modal-close-button, error-modal, error-message, error-message-close-button]`
at dash_renderer.v1_2_2…646652.dev.js:30766
at Array.map (<anonymous>)
at updateOutput (dash_renderer.v1_2_2…646652.dev.js:30763)
at _callee$ (dash_renderer.v1_2_2…646652.dev.js:30679)
at tryCatch (polyfill@7.v1_2_2m15…646652.7.0.min.js:1)
at Generator.invoke [as _invoke] (polyfill@7.v1_2_2m15…646652.7.0.min.js:1)
at Generator.t.<computed> [as next] (polyfill@7.v1_2_2m15…646652.7.0.min.js:1)
at tryCatch (polyfill@7.v1_2_2m15…646652.7.0.min.js:1)
at invoke (polyfill@7.v1_2_2m15…646652.7.0.min.js:1)
at polyfill@7.v1_2_2m15…646652.7.0.min.js:1
(anonymous) @ dash_renderer.v1_2_2…646652.dev.js:30766
updateOutput @ dash_renderer.v1_2_2…646652.dev.js:30763
_callee$ @ dash_renderer.v1_2_2…646652.dev.js:30679
tryCatch @ polyfill@7.v1_2_2m15…646652.7.0.min.js:1
invoke @ polyfill@7.v1_2_2m15…646652.7.0.min.js:1
t.<computed> @ polyfill@7.v1_2_2m15…646652.7.0.min.js:1
tryCatch @ polyfill@7.v1_2_2m15…646652.7.0.min.js:1
invoke @ polyfill@7.v1_2_2m15…646652.7.0.min.js:1
(anonymous) @ polyfill@7.v1_2_2m15…646652.7.0.min.js:1
Promise.then (async)
o.async @ polyfill@7.v1_2_2m15…646652.7.0.min.js:1
_callee @ dash_renderer.v1_2_2…646652.dev.js:30500
(anonymous) @ dash_renderer.v1_2_2…646652.dev.js:27581
dispatch @ dash_renderer.v1_2_2…646652.dev.js:27642
(anonymous) @ dash_renderer.v1_2_2…646652.dev.js:30404
triggerDefaultState @ dash_renderer.v1_2_2…646652.dev.js:30395
(anonymous) @ dash_renderer.v1_2_2…646652.dev.js:30343
(anonymous) @ dash_renderer.v1_2_2…646652.dev.js:27581
initialization @ dash_renderer.v1_2_2…646652.dev.js:29514
componentWillReceiveProps @ dash_renderer.v1_2_2…646652.dev.js:29474
callComponentWillReceiveProps @ react-dom@16.v1_2_2m…646652.8.6.js:11576
updateClassInstance @ react-dom@16.v1_2_2m…646652.8.6.js:11786
updateClassComponent @ react-dom@16.v1_2_2m…646652.8.6.js:14829
beginWork @ react-dom@16.v1_2_2m…646652.8.6.js:15779
performUnitOfWork @ react-dom@16.v1_2_2m…646652.8.6.js:19447
workLoop @ react-dom@16.v1_2_2m…646652.8.6.js:19487
renderRoot @ react-dom@16.v1_2_2m…646652.8.6.js:19570
performWorkOnRoot @ react-dom@16.v1_2_2m…646652.8.6.js:20477
performWork @ react-dom@16.v1_2_2m…646652.8.6.js:20389
performSyncWork @ react-dom@16.v1_2_2m…646652.8.6.js:20363
requestWork @ react-dom@16.v1_2_2m…646652.8.6.js:20232
scheduleWork @ react-dom@16.v1_2_2m…646652.8.6.js:20046
enqueueSetState @ react-dom@16.v1_2_2m…646652.8.6.js:11304
Component.setState @ react@16.v1_2_2m1584646652.8.6.js:423
handleChange @ dash_renderer.v1_2_2…646652.dev.js:27095
dispatch @ dash_renderer.v1_2_2…646652.dev.js:28095
(anonymous) @ dash_renderer.v1_2_2…646652.dev.js:27584
dispatch @ dash_renderer.v1_2_2…646652.dev.js:27642
(anonymous) @ dash_renderer.v1_2_2…646652.dev.js:30206
Promise.then (async)
(anonymous) @ dash_renderer.v1_2_2…646652.dev.js:30205
Promise.then (async)
(anonymous) @ dash_renderer.v1_2_2…646652.dev.js:30201
(anonymous) @ dash_renderer.v1_2_2…646652.dev.js:27581
initialization @ dash_renderer.v1_2_2…646652.dev.js:29502
componentDidMount @ dash_renderer.v1_2_2…646652.dev.js:29469
commitLifeCycles @ react-dom@16.v1_2_2m…646652.8.6.js:17469
commitAllLifeCycles @ react-dom@16.v1_2_2m…646652.8.6.js:18871
callCallback @ react-dom@16.v1_2_2m…84646652.8.6.js:143
invokeGuardedCallbackDev @ react-dom@16.v1_2_2m…84646652.8.6.js:193
invokeGuardedCallback @ react-dom@16.v1_2_2m…84646652.8.6.js:250
commitRoot @ react-dom@16.v1_2_2m…646652.8.6.js:19083
(anonymous) @ react-dom@16.v1_2_2m…646652.8.6.js:20553
unstable_runWithPriority @ react@16.v1_2_2m1584646652.8.6.js:735
completeRoot @ react-dom@16.v1_2_2m…646652.8.6.js:20552
performWorkOnRoot @ react-dom@16.v1_2_2m…646652.8.6.js:20481
performWork @ react-dom@16.v1_2_2m…646652.8.6.js:20389
performSyncWork @ react-dom@16.v1_2_2m…646652.8.6.js:20363
requestWork @ react-dom@16.v1_2_2m…646652.8.6.js:20232
scheduleWork @ react-dom@16.v1_2_2m…646652.8.6.js:20046
scheduleRootUpdate @ react-dom@16.v1_2_2m…646652.8.6.js:20707
updateContainerAtExpirationTime @ react-dom@16.v1_2_2m…646652.8.6.js:20735
updateContainer @ react-dom@16.v1_2_2m…646652.8.6.js:20792
ReactRoot.render @ react-dom@16.v1_2_2m…646652.8.6.js:21088
(anonymous) @ react-dom@16.v1_2_2m…646652.8.6.js:21225
unbatchedUpdates @ react-dom@16.v1_2_2m…646652.8.6.js:20594
legacyRenderSubtreeIntoContainer @ react-dom@16.v1_2_2m…646652.8.6.js:21221
render @ react-dom@16.v1_2_2m…646652.8.6.js:21290
DashRenderer @ dash_renderer.v1_2_2…646652.dev.js:29800
(anonymous) @ (index):36