Upload Component - file uploaded multiple times

Dash Python
2

That’s a good question. Right now, @app.callback will send the contents of the Input and State from the browser to the server whenever any of the Input properties change. In this case, the Input property is very large, so it will be sent on every request.

If you have multiple callbacks that depend on this input, then you can share the state of these inputs between callbacks by persisting it to the disk with a solution like here: Capture window/tab closing event

Alternatively, you could have one callback that writes the file to the disk and the rest of the callbacks could read the file from the disk. Something like:

def serve_layout():
    # see https://community.plotly.com/t/capture-window-tab-closing-event/7375/2
    # for more detail
    session_id = str(uuid.uuid4())
    return html.Div([
         html.Div(session_id, id='session-id', style={'display': 'none'})
         # the rest of your app
    ])

app.layout = serve_layout

@app.callback(
    Output('div', 'children'),
    [Input('upload', 'contents'), [Input('session-id', 'children')])
def save_file(contents, session_id):
    # write contents to file
    write_file(session_id, contents)


@app.callback(
    Output('another-div', 'children'),
    [Input('session-id', 'children'), Input('dropdown', 'value), ...])
def respond_to_file(session_id, contents):
    try:
        df = pd.read_csv(session_id)
    except:
        return html.Div('file doesn\'t exist yet')
    return ... # whatever you do with the file

note how we’re using session-id as a unique ids per user session, so that multiple users can still interact with the app at once.

3 Likes