Upload Component

[chriddyp]

Fixesplotly/dash#65

[chriddyp]

Usage (15 lines of app code! 😻 )

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportpandasaspdimportioapp=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')])defupdate_figure(content):
ifnotcontent:
return []
dff=pd.read_csv(io.StringIO(content))
returndff.to_dict('records')
app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

cc @dhhagan@alishobeiri

[chriddyp]

I've published this on the prerelease channel. Try this out with:

pip install dash-core-components==0.13.0rc1

[chriddyp]

Just published another release with properties:

pip install dash-core-components==0.13.0rc2

Some examples:

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportjsonimportpandasaspdimportplotlyimportioapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.H1('Dash Upload Component'),
html.Hr(),
html.H3('Default'),
dcc.Upload(id='upload'),
html.Hr(),
html.H3('Custom Style with Children'),
dcc.Upload(
children=html.Div([
'Drag and Drop or ',
html.A('Select a File')
]),
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center'
}
),
html.Hr(),
html.H3('Styled as a Button'),
dcc.Upload(
html.Button('Upload'),
style={}
),
html.Hr(),
], className="container")
app.css.append_css({
"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

I think that I will initialize the style to be {} and offer the html.Button and the dashed-style dropzone syntax as the canonical examples

[chriddyp]

I have published v0.13.0-rc3. Upgrade with:

pip install dash-core-components==0.13.0rc3

This prerelease changes the default styles and changes the format of the content property into a base64 encoded string. Here's the new usage:

Usage (Python 2)

importdashfromdash.dependenciesimportInput, Output, Stateimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportbase64importjsonimportpandasaspdimportplotlyimportioapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.Div(id='waitfor'),
dcc.Upload(
id='upload',
children=html.Div([
'Drag and Drop or ',
html.A('Select a File')
]),
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '10px'
}
),
html.Div(id='output'),
html.Div(dt.DataTable(rows=[{}]), style={'display': 'none'})
])
pre_style= {
'whiteSpace': 'pre-wrap',
'wordBreak': 'break-all',
'whiteSpace': 'normal'
}
@app.callback(Output('output', 'children'), [Input('upload', 'contents')])defupdate_output(contents):
ifcontentsisnotNone:
content_type, content_string=contents.split(',')
if'csv'incontent_type:
df=pd.read_csv(io.StringIO(base64.b64decode(content_string).decode('utf-8')))
returnhtml.Div([
dt.DataTable(rows=df.to_dict('records')),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
elif'image'incontent_type:
returnhtml.Div([
html.Img(src=contents),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
else:
# xlsx will have 'spreadsheet' in `content_type` but `xls` won't# have anythingtry:
df=pd.read_excel(io.BytesIO(base64.b64decode(content_string)))
returnhtml.Div([
dt.DataTable(rows=df.to_dict('records')),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
except:
returnhtml.Div([
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
app.css.append_css({
"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

I'm pretty happy with this. I'll keep this PR open for a few days and solicit feedback before I merge it in.

[kevinchiang]

Would it be possible to add a "filename(s)" property here to indicated which file or files have been dropped? Then set the property on line 35 of src/components/Upload.react.js, and add to Upload.propTypes? Or is there a way to get the filename that I'm not seeing?

Thanks

[chriddyp]

Good idea @kevinchiang ! Added this in dfa51bd

[jspablo]

Is possible to get the path from the input file?

Thank you

[chriddyp]

This is now available in dash-core-components==0.14.0. Docs available at: https://plot.ly/dash/dash-core-components/upload

[tantrev]

It would also be super nice if the upload could support input from an external URL.

[chriddyp]

Fixesplotly/dash#65

[chriddyp]

Usage (15 lines of app code! 😻 )

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportpandasaspdimportioapp=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')])defupdate_figure(content):
ifnotcontent:
return []
dff=pd.read_csv(io.StringIO(content))
returndff.to_dict('records')
app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

cc @dhhagan@alishobeiri

[chriddyp]

I've published this on the prerelease channel. Try this out with:

pip install dash-core-components==0.13.0rc1

[chriddyp]

Just published another release with properties:

pip install dash-core-components==0.13.0rc2

Some examples:

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportjsonimportpandasaspdimportplotlyimportioapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.H1('Dash Upload Component'),
html.Hr(),
html.H3('Default'),
dcc.Upload(id='upload'),
html.Hr(),
html.H3('Custom Style with Children'),
dcc.Upload(
children=html.Div([
'Drag and Drop or ',
html.A('Select a File')
]),
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center'
}
),
html.Hr(),
html.H3('Styled as a Button'),
dcc.Upload(
html.Button('Upload'),
style={}
),
html.Hr(),
], className="container")
app.css.append_css({
"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

I think that I will initialize the style to be {} and offer the html.Button and the dashed-style dropzone syntax as the canonical examples

[chriddyp]

I have published v0.13.0-rc3. Upgrade with:

pip install dash-core-components==0.13.0rc3

This prerelease changes the default styles and changes the format of the content property into a base64 encoded string. Here's the new usage:

Usage (Python 2)

importdashfromdash.dependenciesimportInput, Output, Stateimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportbase64importjsonimportpandasaspdimportplotlyimportioapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.Div(id='waitfor'),
dcc.Upload(
id='upload',
children=html.Div([
'Drag and Drop or ',
html.A('Select a File')
]),
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '10px'
}
),
html.Div(id='output'),
html.Div(dt.DataTable(rows=[{}]), style={'display': 'none'})
])
pre_style= {
'whiteSpace': 'pre-wrap',
'wordBreak': 'break-all',
'whiteSpace': 'normal'
}
@app.callback(Output('output', 'children'), [Input('upload', 'contents')])defupdate_output(contents):
ifcontentsisnotNone:
content_type, content_string=contents.split(',')
if'csv'incontent_type:
df=pd.read_csv(io.StringIO(base64.b64decode(content_string).decode('utf-8')))
returnhtml.Div([
dt.DataTable(rows=df.to_dict('records')),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
elif'image'incontent_type:
returnhtml.Div([
html.Img(src=contents),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
else:
# xlsx will have 'spreadsheet' in `content_type` but `xls` won't# have anythingtry:
df=pd.read_excel(io.BytesIO(base64.b64decode(content_string)))
returnhtml.Div([
dt.DataTable(rows=df.to_dict('records')),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
except:
returnhtml.Div([
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
app.css.append_css({
"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

I'm pretty happy with this. I'll keep this PR open for a few days and solicit feedback before I merge it in.

[kevinchiang]

Would it be possible to add a "filename(s)" property here to indicated which file or files have been dropped? Then set the property on line 35 of src/components/Upload.react.js, and add to Upload.propTypes? Or is there a way to get the filename that I'm not seeing?

Thanks

[chriddyp]

Good idea @kevinchiang ! Added this in dfa51bd

[jspablo]

Is possible to get the path from the input file?

Thank you

[chriddyp]

This is now available in dash-core-components==0.14.0. Docs available at: https://plot.ly/dash/dash-core-components/upload

[tantrev]

It would also be super nice if the upload could support input from an external URL.

[chriddyp]

Fixesplotly/dash#65

[chriddyp]

Usage (15 lines of app code! 😻 )

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportpandasaspdimportioapp=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')])defupdate_figure(content):
ifnotcontent:
return []
dff=pd.read_csv(io.StringIO(content))
returndff.to_dict('records')
app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

cc @dhhagan@alishobeiri

[chriddyp]

I've published this on the prerelease channel. Try this out with:

pip install dash-core-components==0.13.0rc1

[chriddyp]

Just published another release with properties:

pip install dash-core-components==0.13.0rc2

Some examples:

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportjsonimportpandasaspdimportplotlyimportioapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.H1('Dash Upload Component'),
html.Hr(),
html.H3('Default'),
dcc.Upload(id='upload'),
html.Hr(),
html.H3('Custom Style with Children'),
dcc.Upload(
children=html.Div([
'Drag and Drop or ',
html.A('Select a File')
]),
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center'
}
),
html.Hr(),
html.H3('Styled as a Button'),
dcc.Upload(
html.Button('Upload'),
style={}
),
html.Hr(),
], className="container")
app.css.append_css({
"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

I think that I will initialize the style to be {} and offer the html.Button and the dashed-style dropzone syntax as the canonical examples

[chriddyp]

I have published v0.13.0-rc3. Upgrade with:

pip install dash-core-components==0.13.0rc3

This prerelease changes the default styles and changes the format of the content property into a base64 encoded string. Here's the new usage:

Usage (Python 2)

importdashfromdash.dependenciesimportInput, Output, Stateimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportbase64importjsonimportpandasaspdimportplotlyimportioapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.Div(id='waitfor'),
dcc.Upload(
id='upload',
children=html.Div([
'Drag and Drop or ',
html.A('Select a File')
]),
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '10px'
}
),
html.Div(id='output'),
html.Div(dt.DataTable(rows=[{}]), style={'display': 'none'})
])
pre_style= {
'whiteSpace': 'pre-wrap',
'wordBreak': 'break-all',
'whiteSpace': 'normal'
}
@app.callback(Output('output', 'children'), [Input('upload', 'contents')])defupdate_output(contents):
ifcontentsisnotNone:
content_type, content_string=contents.split(',')
if'csv'incontent_type:
df=pd.read_csv(io.StringIO(base64.b64decode(content_string).decode('utf-8')))
returnhtml.Div([
dt.DataTable(rows=df.to_dict('records')),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
elif'image'incontent_type:
returnhtml.Div([
html.Img(src=contents),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
else:
# xlsx will have 'spreadsheet' in `content_type` but `xls` won't# have anythingtry:
df=pd.read_excel(io.BytesIO(base64.b64decode(content_string)))
returnhtml.Div([
dt.DataTable(rows=df.to_dict('records')),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
except:
returnhtml.Div([
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
app.css.append_css({
"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

I'm pretty happy with this. I'll keep this PR open for a few days and solicit feedback before I merge it in.

[kevinchiang]

Would it be possible to add a "filename(s)" property here to indicated which file or files have been dropped? Then set the property on line 35 of src/components/Upload.react.js, and add to Upload.propTypes? Or is there a way to get the filename that I'm not seeing?

Thanks

[chriddyp]

Good idea @kevinchiang ! Added this in dfa51bd

[jspablo]

Is possible to get the path from the input file?

Thank you

[chriddyp]

This is now available in dash-core-components==0.14.0. Docs available at: https://plot.ly/dash/dash-core-components/upload

[tantrev]

It would also be super nice if the upload could support input from an external URL.

[chriddyp]

Fixesplotly/dash#65

[chriddyp]

Usage (15 lines of app code! 😻 )

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportpandasaspdimportioapp=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')])defupdate_figure(content):
ifnotcontent:
return []
dff=pd.read_csv(io.StringIO(content))
returndff.to_dict('records')
app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

cc @dhhagan@alishobeiri

[chriddyp]

I've published this on the prerelease channel. Try this out with:

pip install dash-core-components==0.13.0rc1

[chriddyp]

Just published another release with properties:

pip install dash-core-components==0.13.0rc2

Some examples:

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportjsonimportpandasaspdimportplotlyimportioapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.H1('Dash Upload Component'),
html.Hr(),
html.H3('Default'),
dcc.Upload(id='upload'),
html.Hr(),
html.H3('Custom Style with Children'),
dcc.Upload(
children=html.Div([
'Drag and Drop or ',
html.A('Select a File')
]),
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center'
}
),
html.Hr(),
html.H3('Styled as a Button'),
dcc.Upload(
html.Button('Upload'),
style={}
),
html.Hr(),
], className="container")
app.css.append_css({
"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

I think that I will initialize the style to be {} and offer the html.Button and the dashed-style dropzone syntax as the canonical examples

[chriddyp]

I have published v0.13.0-rc3. Upgrade with:

pip install dash-core-components==0.13.0rc3

This prerelease changes the default styles and changes the format of the content property into a base64 encoded string. Here's the new usage:

Usage (Python 2)

importdashfromdash.dependenciesimportInput, Output, Stateimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportbase64importjsonimportpandasaspdimportplotlyimportioapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.Div(id='waitfor'),
dcc.Upload(
id='upload',
children=html.Div([
'Drag and Drop or ',
html.A('Select a File')
]),
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '10px'
}
),
html.Div(id='output'),
html.Div(dt.DataTable(rows=[{}]), style={'display': 'none'})
])
pre_style= {
'whiteSpace': 'pre-wrap',
'wordBreak': 'break-all',
'whiteSpace': 'normal'
}
@app.callback(Output('output', 'children'), [Input('upload', 'contents')])defupdate_output(contents):
ifcontentsisnotNone:
content_type, content_string=contents.split(',')
if'csv'incontent_type:
df=pd.read_csv(io.StringIO(base64.b64decode(content_string).decode('utf-8')))
returnhtml.Div([
dt.DataTable(rows=df.to_dict('records')),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
elif'image'incontent_type:
returnhtml.Div([
html.Img(src=contents),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
else:
# xlsx will have 'spreadsheet' in `content_type` but `xls` won't# have anythingtry:
df=pd.read_excel(io.BytesIO(base64.b64decode(content_string)))
returnhtml.Div([
dt.DataTable(rows=df.to_dict('records')),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
except:
returnhtml.Div([
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
app.css.append_css({
"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

I'm pretty happy with this. I'll keep this PR open for a few days and solicit feedback before I merge it in.

[kevinchiang]

Would it be possible to add a "filename(s)" property here to indicated which file or files have been dropped? Then set the property on line 35 of src/components/Upload.react.js, and add to Upload.propTypes? Or is there a way to get the filename that I'm not seeing?

Thanks

[chriddyp]

Good idea @kevinchiang ! Added this in dfa51bd

[jspablo]

Is possible to get the path from the input file?

Thank you

[chriddyp]

This is now available in dash-core-components==0.14.0. Docs available at: https://plot.ly/dash/dash-core-components/upload

[tantrev]

It would also be super nice if the upload could support input from an external URL.

[chriddyp]

Fixesplotly/dash#65

[chriddyp]

Usage (15 lines of app code! 😻 )

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportpandasaspdimportioapp=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')])defupdate_figure(content):
ifnotcontent:
return []
dff=pd.read_csv(io.StringIO(content))
returndff.to_dict('records')
app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

cc @dhhagan@alishobeiri

[chriddyp]

I've published this on the prerelease channel. Try this out with:

pip install dash-core-components==0.13.0rc1

[chriddyp]

Just published another release with properties:

pip install dash-core-components==0.13.0rc2

Some examples:

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportjsonimportpandasaspdimportplotlyimportioapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.H1('Dash Upload Component'),
html.Hr(),
html.H3('Default'),
dcc.Upload(id='upload'),
html.Hr(),
html.H3('Custom Style with Children'),
dcc.Upload(
children=html.Div([
'Drag and Drop or ',
html.A('Select a File')
]),
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center'
}
),
html.Hr(),
html.H3('Styled as a Button'),
dcc.Upload(
html.Button('Upload'),
style={}
),
html.Hr(),
], className="container")
app.css.append_css({
"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

I think that I will initialize the style to be {} and offer the html.Button and the dashed-style dropzone syntax as the canonical examples

[chriddyp]

I have published v0.13.0-rc3. Upgrade with:

pip install dash-core-components==0.13.0rc3

This prerelease changes the default styles and changes the format of the content property into a base64 encoded string. Here's the new usage:

Usage (Python 2)

importdashfromdash.dependenciesimportInput, Output, Stateimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportbase64importjsonimportpandasaspdimportplotlyimportioapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.Div(id='waitfor'),
dcc.Upload(
id='upload',
children=html.Div([
'Drag and Drop or ',
html.A('Select a File')
]),
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '10px'
}
),
html.Div(id='output'),
html.Div(dt.DataTable(rows=[{}]), style={'display': 'none'})
])
pre_style= {
'whiteSpace': 'pre-wrap',
'wordBreak': 'break-all',
'whiteSpace': 'normal'
}
@app.callback(Output('output', 'children'), [Input('upload', 'contents')])defupdate_output(contents):
ifcontentsisnotNone:
content_type, content_string=contents.split(',')
if'csv'incontent_type:
df=pd.read_csv(io.StringIO(base64.b64decode(content_string).decode('utf-8')))
returnhtml.Div([
dt.DataTable(rows=df.to_dict('records')),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
elif'image'incontent_type:
returnhtml.Div([
html.Img(src=contents),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
else:
# xlsx will have 'spreadsheet' in `content_type` but `xls` won't# have anythingtry:
df=pd.read_excel(io.BytesIO(base64.b64decode(content_string)))
returnhtml.Div([
dt.DataTable(rows=df.to_dict('records')),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
except:
returnhtml.Div([
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
app.css.append_css({
"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

I'm pretty happy with this. I'll keep this PR open for a few days and solicit feedback before I merge it in.

[kevinchiang]

Would it be possible to add a "filename(s)" property here to indicated which file or files have been dropped? Then set the property on line 35 of src/components/Upload.react.js, and add to Upload.propTypes? Or is there a way to get the filename that I'm not seeing?

Thanks

[chriddyp]

Good idea @kevinchiang ! Added this in dfa51bd

[jspablo]

Is possible to get the path from the input file?

Thank you

[chriddyp]

This is now available in dash-core-components==0.14.0. Docs available at: https://plot.ly/dash/dash-core-components/upload

[tantrev]

It would also be super nice if the upload could support input from an external URL.

[chriddyp]

Fixesplotly/dash#65

[chriddyp]

Usage (15 lines of app code! 😻 )

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportpandasaspdimportioapp=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')])defupdate_figure(content):
ifnotcontent:
return []
dff=pd.read_csv(io.StringIO(content))
returndff.to_dict('records')
app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

cc @dhhagan@alishobeiri

[chriddyp]

I've published this on the prerelease channel. Try this out with:

pip install dash-core-components==0.13.0rc1

[chriddyp]

Just published another release with properties:

pip install dash-core-components==0.13.0rc2

Some examples:

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportjsonimportpandasaspdimportplotlyimportioapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.H1('Dash Upload Component'),
html.Hr(),
html.H3('Default'),
dcc.Upload(id='upload'),
html.Hr(),
html.H3('Custom Style with Children'),
dcc.Upload(
children=html.Div([
'Drag and Drop or ',
html.A('Select a File')
]),
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center'
}
),
html.Hr(),
html.H3('Styled as a Button'),
dcc.Upload(
html.Button('Upload'),
style={}
),
html.Hr(),
], className="container")
app.css.append_css({
"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

I think that I will initialize the style to be {} and offer the html.Button and the dashed-style dropzone syntax as the canonical examples

[chriddyp]

I have published v0.13.0-rc3. Upgrade with:

pip install dash-core-components==0.13.0rc3

This prerelease changes the default styles and changes the format of the content property into a base64 encoded string. Here's the new usage:

Usage (Python 2)

importdashfromdash.dependenciesimportInput, Output, Stateimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportbase64importjsonimportpandasaspdimportplotlyimportioapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.Div(id='waitfor'),
dcc.Upload(
id='upload',
children=html.Div([
'Drag and Drop or ',
html.A('Select a File')
]),
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '10px'
}
),
html.Div(id='output'),
html.Div(dt.DataTable(rows=[{}]), style={'display': 'none'})
])
pre_style= {
'whiteSpace': 'pre-wrap',
'wordBreak': 'break-all',
'whiteSpace': 'normal'
}
@app.callback(Output('output', 'children'), [Input('upload', 'contents')])defupdate_output(contents):
ifcontentsisnotNone:
content_type, content_string=contents.split(',')
if'csv'incontent_type:
df=pd.read_csv(io.StringIO(base64.b64decode(content_string).decode('utf-8')))
returnhtml.Div([
dt.DataTable(rows=df.to_dict('records')),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
elif'image'incontent_type:
returnhtml.Div([
html.Img(src=contents),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
else:
# xlsx will have 'spreadsheet' in `content_type` but `xls` won't# have anythingtry:
df=pd.read_excel(io.BytesIO(base64.b64decode(content_string)))
returnhtml.Div([
dt.DataTable(rows=df.to_dict('records')),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
except:
returnhtml.Div([
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
app.css.append_css({
"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

I'm pretty happy with this. I'll keep this PR open for a few days and solicit feedback before I merge it in.

[kevinchiang]

Would it be possible to add a "filename(s)" property here to indicated which file or files have been dropped? Then set the property on line 35 of src/components/Upload.react.js, and add to Upload.propTypes? Or is there a way to get the filename that I'm not seeing?

Thanks

[chriddyp]

Good idea @kevinchiang ! Added this in dfa51bd

[jspablo]

Is possible to get the path from the input file?

Thank you

[chriddyp]

This is now available in dash-core-components==0.14.0. Docs available at: https://plot.ly/dash/dash-core-components/upload

[tantrev]

It would also be super nice if the upload could support input from an external URL.

[chriddyp]

Fixesplotly/dash#65

[chriddyp]

Usage (15 lines of app code! 😻 )

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportpandasaspdimportioapp=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')])defupdate_figure(content):
ifnotcontent:
return []
dff=pd.read_csv(io.StringIO(content))
returndff.to_dict('records')
app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

cc @dhhagan@alishobeiri

[chriddyp]

I've published this on the prerelease channel. Try this out with:

pip install dash-core-components==0.13.0rc1

[chriddyp]

Just published another release with properties:

pip install dash-core-components==0.13.0rc2

Some examples:

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportjsonimportpandasaspdimportplotlyimportioapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.H1('Dash Upload Component'),
html.Hr(),
html.H3('Default'),
dcc.Upload(id='upload'),
html.Hr(),
html.H3('Custom Style with Children'),
dcc.Upload(
children=html.Div([
'Drag and Drop or ',
html.A('Select a File')
]),
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center'
}
),
html.Hr(),
html.H3('Styled as a Button'),
dcc.Upload(
html.Button('Upload'),
style={}
),
html.Hr(),
], className="container")
app.css.append_css({
"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

I think that I will initialize the style to be {} and offer the html.Button and the dashed-style dropzone syntax as the canonical examples

[chriddyp]

I have published v0.13.0-rc3. Upgrade with:

pip install dash-core-components==0.13.0rc3

This prerelease changes the default styles and changes the format of the content property into a base64 encoded string. Here's the new usage:

Usage (Python 2)

importdashfromdash.dependenciesimportInput, Output, Stateimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportbase64importjsonimportpandasaspdimportplotlyimportioapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.Div(id='waitfor'),
dcc.Upload(
id='upload',
children=html.Div([
'Drag and Drop or ',
html.A('Select a File')
]),
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '10px'
}
),
html.Div(id='output'),
html.Div(dt.DataTable(rows=[{}]), style={'display': 'none'})
])
pre_style= {
'whiteSpace': 'pre-wrap',
'wordBreak': 'break-all',
'whiteSpace': 'normal'
}
@app.callback(Output('output', 'children'), [Input('upload', 'contents')])defupdate_output(contents):
ifcontentsisnotNone:
content_type, content_string=contents.split(',')
if'csv'incontent_type:
df=pd.read_csv(io.StringIO(base64.b64decode(content_string).decode('utf-8')))
returnhtml.Div([
dt.DataTable(rows=df.to_dict('records')),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
elif'image'incontent_type:
returnhtml.Div([
html.Img(src=contents),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
else:
# xlsx will have 'spreadsheet' in `content_type` but `xls` won't# have anythingtry:
df=pd.read_excel(io.BytesIO(base64.b64decode(content_string)))
returnhtml.Div([
dt.DataTable(rows=df.to_dict('records')),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
except:
returnhtml.Div([
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
app.css.append_css({
"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

I'm pretty happy with this. I'll keep this PR open for a few days and solicit feedback before I merge it in.

[kevinchiang]

Would it be possible to add a "filename(s)" property here to indicated which file or files have been dropped? Then set the property on line 35 of src/components/Upload.react.js, and add to Upload.propTypes? Or is there a way to get the filename that I'm not seeing?

Thanks

[chriddyp]

Good idea @kevinchiang ! Added this in dfa51bd

[jspablo]

Is possible to get the path from the input file?

Thank you

[chriddyp]

This is now available in dash-core-components==0.14.0. Docs available at: https://plot.ly/dash/dash-core-components/upload

[tantrev]

It would also be super nice if the upload could support input from an external URL.

[chriddyp]

Fixesplotly/dash#65

[chriddyp]

Usage (15 lines of app code! 😻 )

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportpandasaspdimportioapp=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')])defupdate_figure(content):
ifnotcontent:
return []
dff=pd.read_csv(io.StringIO(content))
returndff.to_dict('records')
app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

cc @dhhagan@alishobeiri

[chriddyp]

I've published this on the prerelease channel. Try this out with:

pip install dash-core-components==0.13.0rc1

[chriddyp]

Just published another release with properties:

pip install dash-core-components==0.13.0rc2

Some examples:

importdashfromdash.dependenciesimportInput, Outputimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportjsonimportpandasaspdimportplotlyimportioapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.H1('Dash Upload Component'),
html.Hr(),
html.H3('Default'),
dcc.Upload(id='upload'),
html.Hr(),
html.H3('Custom Style with Children'),
dcc.Upload(
children=html.Div([
'Drag and Drop or ',
html.A('Select a File')
]),
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center'
}
),
html.Hr(),
html.H3('Styled as a Button'),
dcc.Upload(
html.Button('Upload'),
style={}
),
html.Hr(),
], className="container")
app.css.append_css({
"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

I think that I will initialize the style to be {} and offer the html.Button and the dashed-style dropzone syntax as the canonical examples

[chriddyp]

I have published v0.13.0-rc3. Upgrade with:

pip install dash-core-components==0.13.0rc3

This prerelease changes the default styles and changes the format of the content property into a base64 encoded string. Here's the new usage:

Usage (Python 2)

importdashfromdash.dependenciesimportInput, Output, Stateimportdash_core_componentsasdccimportdash_html_componentsashtmlimportdash_table_experimentsasdtimportbase64importjsonimportpandasaspdimportplotlyimportioapp=dash.Dash()
app.scripts.config.serve_locally=Trueapp.layout=html.Div([
html.Div(id='waitfor'),
dcc.Upload(
id='upload',
children=html.Div([
'Drag and Drop or ',
html.A('Select a File')
]),
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '10px'
}
),
html.Div(id='output'),
html.Div(dt.DataTable(rows=[{}]), style={'display': 'none'})
])
pre_style= {
'whiteSpace': 'pre-wrap',
'wordBreak': 'break-all',
'whiteSpace': 'normal'
}
@app.callback(Output('output', 'children'), [Input('upload', 'contents')])defupdate_output(contents):
ifcontentsisnotNone:
content_type, content_string=contents.split(',')
if'csv'incontent_type:
df=pd.read_csv(io.StringIO(base64.b64decode(content_string).decode('utf-8')))
returnhtml.Div([
dt.DataTable(rows=df.to_dict('records')),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
elif'image'incontent_type:
returnhtml.Div([
html.Img(src=contents),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
else:
# xlsx will have 'spreadsheet' in `content_type` but `xls` won't# have anythingtry:
df=pd.read_excel(io.BytesIO(base64.b64decode(content_string)))
returnhtml.Div([
dt.DataTable(rows=df.to_dict('records')),
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
except:
returnhtml.Div([
html.Hr(),
html.Div('Raw Content'),
html.Pre(contents, style=pre_style)
])
app.css.append_css({
"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})
if__name__=='__main__':
app.run_server(debug=True)

[chriddyp]

I'm pretty happy with this. I'll keep this PR open for a few days and solicit feedback before I merge it in.

[kevinchiang]

Would it be possible to add a "filename(s)" property here to indicated which file or files have been dropped? Then set the property on line 35 of src/components/Upload.react.js, and add to Upload.propTypes? Or is there a way to get the filename that I'm not seeing?

Thanks

[chriddyp]

Good idea @kevinchiang ! Added this in dfa51bd

[jspablo]

Is possible to get the path from the input file?

Thank you

[chriddyp]

This is now available in dash-core-components==0.14.0. Docs available at: https://plot.ly/dash/dash-core-components/upload

[tantrev]

It would also be super nice if the upload could support input from an external URL.