连续两次删除同一个文件的问题答案

【问题标题】：Problem dropping same file twice in a row连续两次删除同一个文件的问题
【发布时间】：2020-10-04 02:10:28
【问题描述】：

我正在使用 Dash Upload 组件，该组件又使用 react-dropzone。

我可以将一个文件拖到组件中，相应的回调就会触发。

然后我可以将不同的文件拖到组件中，回调将再次触发。

但是，如果我将一个文件拖到组件中（触发回调），然后再次将同一个文件拖到组件中，则回调不会触发。

有一个演示应用 in this Gist 演示了该行为。

搜索类似问题（stack-overflow、github）表明这种行为是意料之中的，因为从浏览器的角度来看，没有任何改变。这两个讨论似乎最终都涉及将某些元素的 .value 部分设置为 '' 的解决方案，以便浏览器将第二个 drop 事件视为更改。

Chriddyp 贡献了 links to the relevant bit of code in Dash 并指出了 react-dropzone 组件。

有没有办法使用 react-dropzone 在 Dash 中连续两次删除文件？

谢谢！

【问题讨论】：

标签： plotly-dash react-dropzone

【解决方案1】：

在 Dash 中，每次属性更改时都会调用回调。如果您再次上传同一个文件，属性（例如文件名）不会改变，因此回调将不被调用。这是预期的行为。

要确保每次都调用回调，您必须确保Input 属性确实发生了变化。一种选择是向Upload 组件添加一个新属性，类似于按钮的n_clicks 属性，例如n_uploads，每次上传文件时都会递增。

解决当前问题的最简单方法可能是改用自定义dash uploader。除此之外，它还支持多次上传同一个文件。

【讨论】：

这个解决方案不起作用？这不是修改文件的内容/修改日期/名称，这是 Dash 需要更改的内容，以便更改文件的“状态”并触发回调。

【解决方案2】：

回答有点晚。我找到了一个解决方案，只需在回调的输出中将contents 和filename 重置为None。

一个简单的例子

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)

【讨论】：