Plotly仪表板实现文件1上传完成后自动触发文件2上传

问题描述 #

我有一个Plotly仪表板，需要上传两个特定且独立的文件。目前使用两个独立的dcc.Upload组件：

app.layout = html.Div([
    dcc.Upload(html.Button('Upload File 1')),
    dcc.Upload(html.Button('Upload File 2')),
])

现在需要用户逐个点击按钮上传文件，想实现文件1上传完成后自动打开文件2的上传提示，无需用户手动点击第二个按钮。

解决方案 #

核心思路是利用Dash的客户端回调（clientside_callback）监听第一个文件的上传状态，当文件1上传完成后，通过JavaScript触发第二个dcc.Upload组件的点击事件，自动唤起文件选择对话框。

完整代码示例

import dash
from dash import html, dcc, Input, Output, State, clientside_callback

app = dash.Dash(__name__)

app.layout = html.Div([
    # 第一个文件上传组件
    dcc.Upload(
        id='upload-file-1',
        children=html.Button('Upload File 1'),
        multiple=False  # 限制单次上传一个文件
    ),
    # 第二个文件上传组件，默认隐藏按钮
    dcc.Upload(
        id='upload-file-2',
        children=html.Button('Upload File 2'),
        multiple=False,
        style={'display': 'none'}
    ),
    # 显示上传状态提示
    html.Div(id='upload-status', style={'marginTop': '10px'})
])

# 客户端回调：文件1上传完成后，自动触发文件2的选择对话框
clientside_callback(
    """
    function(contents) {
        if (contents) {
            // 获取第二个上传组件的DOM元素
            const uploadElement = document.getElementById('upload-file-2');
            // 触发点击事件，唤起文件选择框
            uploadElement.click();
            return '✅ 文件1上传完成，已自动触发文件2上传';
        }
        return '';
    }
    """,
    Output('upload-status', 'children'),
    Input('upload-file-1', 'contents'),
    prevent_initial_call=True  # 避免页面加载时触发
)

# 处理文件2的上传逻辑（根据需求自定义）
@app.callback(
    Output('upload-status', 'children', allow_duplicate=True),
    Input('upload-file-2', 'contents'),
    State('upload-file-2', 'filename'),
    prevent_initial_call=True
)
def process_file2(contents, filename):
    if contents:
        # 这里添加文件2的处理逻辑，比如解析内容、存储等
        return f'✅ 文件2 {filename} 上传完成'
    return ''

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

关键说明

1. 客户端回调必要性：浏览器的安全策略禁止服务器直接触发文件选择框，必须通过客户端JavaScript实现，因此使用clientside_callback执行前端逻辑。
2. 隐藏第二个按钮：将第二个dcc.Upload的按钮设为隐藏，确保用户只能通过自动触发打开文件选择框，避免误操作。
3. 状态提示：通过upload-status组件实时反馈上传进度，提升用户体验。
4. 文件处理逻辑：在process_file2回调中可以添加自定义的文件解析、存储等业务逻辑，根据实际需求调整。

内容的提问来源于stack exchange，提问作者Ivar Stange