In the DCC upload component, is it possible to update the name of the file that has been uploaded ?
For example, the name within the component is “Drag and Drop or Select Files”. After the file has been uploaded, can “Drag and Drop or Select Files” be removed and the name of the file be reflected in its place ?
you can add a callback that handles that whenever a file has been uploaded. Below is a simple example:
app.layout = html.Div([
dcc.Upload(
id='upload-data',
children=html.Div([
'Drag and Drop or Select Files'
],
id='uploadedContent'
),
style={
'width': '60%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '20%'
}
)
])
@app.callback(Output('uploadedContent','children'),
[Input('upload-data', 'contents')],
[State('upload-data', 'filename')])
def update_filename(contents, fname):
if contents == None:
raise PreventUpdate
else:
return fname
give it a try…
1 Like
Hello @cdessy
I was wondering if it was possible with the default example provided by the Dash documentation here :-
https://dash.plot.ly/dash-core-components/upload
Since now we are returning a list (children and the filename), how can I access the list elements within the html div, where the output data div should generate the table and the Upload component should change the name to the uploaded file ?
Regards,
Ashwin Shenoy
you can use a multi output callback that updates both the output div and the dcc.Upload
component.
take a look at this repo…
Regards,
1 Like
Thanks a lot @cdessy, that worked perfectly
1 Like