Problem dropping same file twice in a row

Question

I'm using the Dash Upload component, which in turn uses react-dropzone.

I can drag a file into the component and the corresponding callback will fire.

I can then drag a different file into the component and the callback will fire again.

But, if I drag a file into the component (which fires the callback) and then drag the same file into the component again, the callback does not fire.

There's a demo app in this Gist that demonstrates the behavior.

Searching for similar problems (stack-overflow, github) suggests that this behavior is to be expected because from the browser's point of view nothing has changed. Both of those discussions seem to end up with solutions that involve setting the .value part of some element to '', so that the browser sees the second drop event as a change.

Chriddyp contributed links to the relevant bit of code in Dash and pointed me to the react-dropzone component.

Is there a way to make dropping the file twice in a row work in Dash using react-dropzone?

Thanks!

g.

Answer 1

A bit late answer. I found a solution which is just reset the contents and filename to None in the Output of the callback.

A simple example

import dash
from dash import dcc, html
from dash.dependencies import Input, Output, State


app = dash.Dash(__name__)
app.layout = html.Div([
    dcc.Upload(html.Button('Upload File', id='btn_id'), id='upload_id'),
    html.P(id='show_id'),
])


@app.callback(
    Output('show_id', 'children'),
    Output('upload_id', 'contents'),
    Output('upload_id', 'filename'),
    Input('upload_id', 'contents'),
    State('upload_id', 'filename'),
    State('btn_id', 'n_clicks'),
)
def uploaded_a_file(contents, filename, n_clicks):
    if not contents:
        raise dash.exceptions.PreventUpdate

    msg = f'Uploaded {filename} for {n_clicks} time.'

    return msg, None, None


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