Upload Component Not Rendering

Dash Python
1

I am trying to add a csv upload option to a dash app I am building, but running into an issue where the component does not render. I pulled an example from the PR that implemented the upload component just to check I didn’t screw anything up and it also doesn’t render.

When I inspect in Chrome I see the <input> component with display: None, and I can remove that style element to surface the button. However, callback to the DataTable does not get triggered . Not sure what I’m doing wrong, so any help would be appreciated

I’ve attached my requirements.txt and the sample code below.

certifi==2017.7.27.1
chardet==3.0.4
click==6.7
dash==0.19.0
dash-core-components==0.14.0
dash-html-components==0.8.0
dash-renderer==0.11.1
dash-table-experiments==0.5.0
decorator==4.1.2
enum34==1.1.6
Flask==0.12.2
Flask-Compress==1.4.0
functools32==3.2.3.post2
idna==2.6
ipython-genutils==0.2.0
itsdangerous==0.24
Jinja2==2.9.6
jsonschema==2.6.0
jupyter-core==4.3.0
MarkupSafe==1.0
nbformat==4.4.0
numpy==1.13.3
pandas==0.20.3
plotly==2.1.0
python-dateutil==2.6.1
pytz==2017.2
requests==2.18.4
six==1.11.0
traitlets==4.3.2
urllib3==1.22
Werkzeug==0.12.2

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt
import pandas as pd
import io

app = dash.Dash()


app.layout = html.Div([
    html.H1('Dash Upload Component'),
    dcc.Upload(id='upload'),
    dt.DataTable(
        id='datatable',
        rows=[{}]
    ),
], className="container")


@app.callback(
    Output('datatable', 'rows'),
    [Input('upload', 'contents')])
def update_figure(content):
    if not content:
        return []
    dff = pd.read_csv(io.StringIO(content))
    return dff.to_dict('records')


app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})


if __name__ == '__main__':
    app.run_server(debug=True)
2

@3li - It’s rendering, it’s just that the children is empty. The examples in the PR are outdated, please see the official docs at https://plot.ly/dash/dash-core-components/upload for more complete examples.

Thank you!

3

Ha, I knew it was going to be something that simple :pensive:

Thanks for the quick response as always!

1 Like