dcc.Upload - return a df and use it throughout your dashboard

Dash Python
1

Hi,

Is there any way I could upload a file from dcc.Upload component and return a df so that I can use it throughout my dashboard?

I thought of assigning the df as a global variable but I read that it’s not a good idea to do that in dash…

Please share some ideas! Appreciate it

1 Like
2

@lil_ml I’m having this exact same problem and I can’t figure it out. If we could define a dataframe df outside of a function, it seems we would be able to use it with dropdown components. The only workaround I have now is to upload the file to google drive and define the dataframe via a web link, but you’d think there has to be a way to do this with dcc.upload() instead. Hopefully someone with more experience can comment!

3

Hi @lil_ml and @skinner4dinner,

I am unexperienced with Dash, but I was trying to wrap my head around this and I came to a very inelegant solution. You can access the Div object containing the dash_table.DataTable (resulting from the dcc.Upload component), by taking the proper item of the list of objects contained (depending on how many html objects your Div contains). For example:

@app.callback(Output('preprocessed_data', 'children'),
              [Input('output-data-upload', 'children'),
               Input('preprocess_df', 'n_clicks')])
def preprocess_data(data, n_clicks):
    if n_clicks is None:
        raise PreventUpdate

    df = pd.DataFrame.from_records(data['props']['children'][2]['props']['data'])

here the first input of the callback is the output of my data uploaded excel file. The element [2] of the list is my dash_table.DataTable object and by accessing its property 'data' one can take the original df uploaded and manipulate it.
Hope this helps, even though I am sure there are better solutions.

Andrea