DataTable fails to update on callback

@rp2532 wrote:

I’m trying to build a dash app with an upload box (dcc.Upload()) and a datatable (dash_table.DataTable()) where the names of files uploaded through the upload box are supposed to be added to the table. Files seem to be successfully uploaded - the filenames of uploaded files are printed correctly to the console by the print statement inside the update_file_table() callback function. However, no new rows appear in the DataTable. Code is below. Also, on startup of the app, I see an error that says:

TypeError: Cannot read property ‘forEach’ of null

Code:

import dash
import dash_core_components as dcc 
import dash_html_components as html 
from dash.dependencies import Input, Output, State
import dash_table
import pandas as pd

import os

import numpy as np
from jv import JVData
data_folder = ‘/Users/rohit/Documents/Academics/Swift/Analysis/Sandbox/jvplot’
dashapp = dash.Dash(name)
jvdata = 
dashapp.layout = html.Div([

dcc.Upload(

id = ‘file-upload’,

children = html.Div([

'Drag and drop here or ',

html.A(‘click here to select files’)

]),

style = {

‘width’: ‘100%’,

‘height’: ‘60px’,

‘lineHeight’: ‘60px’,

‘borderWidth’: ‘1px’,

‘borderStyle’: ‘dashed’,

‘borderRadius’: ‘5px’,

‘textAlign’: ‘center’,

‘margin’: ‘10px’

},

multiple = True

),
dash_table.DataTable(
    id = 'file-table',
    columns = [{'name': 'Filename', 'id': 'Filename'}],
    row_selectable = 'multi',
    row_deletable = True,
    data = [],
),

])
@dashapp.callback(

Output(component_id=‘file-table’, component_property=‘data’),

[Input(component_id=‘file-upload’, component_property=‘contents’)],

[State(component_id=‘file-upload’, component_property=‘filename’),

State(component_id=‘file-upload’, component_property=‘last_modified’)]

)

def update_file_table(list_of_contents, list_of_filenames, list_of_last_modified):

if list_of_contents is not None:

[jvdata.append(JVData(f)) for f in list_of_filenames]
    data = [{'Filename': jv.filepath} for jv in jvdata]

    print(data)

    return data

JVData is a class that contains (among other things) the filepath as an instance variable.

Posts: 2

Participants: 2

Read full topic