DCC Upload component change name

Dash Python
1

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 ?

2

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… :relaxed:

1 Like
3

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

4

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
5

Thanks a lot @cdessy, that worked perfectly :slightly_smiling_face::+1:

1 Like