How to extract the name of selected column from Dropdown?

Dash Python
1

Hey, I am new to Dash. I have somehow created a front-end that is able to upload and show the dataframe. selectData is messed up. In short it is able to display all the columns of any dataframe and letting me select one, BUT how do i store it in order to use that particular column for plotting functions?

import base64
import datetime
import io

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

import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.Dropdown(['Excel Sheet', 'CSV File'], id='file_type', multi=False, style={'width': "40%"}),
    html.Div(id='output_filetype'),
    dcc.Upload(
        id='upload-data',
        children=html.Div([
            'Drag and Drop or ',
            html.A('Select Files')
        ]),
        style={
            'width': '100%',
            'height': '60px',
            'lineHeight': '60px',
            'borderWidth': '1px',
            'borderStyle': 'dashed',
            'borderRadius': '5px',
            'textAlign': 'center',
            'margin': '10px'
        },
        # Allow multiple files to be uploaded
        multiple=True
    ),
    html.Div(id='output-data-upload'),
    html.Div(id='column_dropdown'),
])

def parse_contents(contents, filename, date):
    content_type, content_string = contents.split(',')
    #global df
    decoded = base64.b64decode(content_string)
    try:
        if 'csv' in filename:
            # Assume that the user uploaded a CSV file
            df = pd.read_csv(
                io.StringIO(decoded.decode('utf-8')))
        elif 'xls' in filename:
            # Assume that the user uploaded an excel file
            df = pd.read_excel(io.BytesIO(decoded))

        app.layout = html.Div([
            dcc.Dropdown(
                [{'name': i, 'id': i} for i in df.columns], id='file_type', multi=False, style={'width': "40%"}
            ),
            html.Div(id='output_filetype'),])

    except Exception as e:
        print(e)
        return html.Div([
            'There was an error processing this file.'
        ])


    ####### Dropdown #########



    return html.Div([
        html.H5(filename),
        html.H6(datetime.datetime.fromtimestamp(date)),

        dash_table.DataTable(
            df.to_dict('records'),
            [{'name': i, 'id': i} for i in df.columns]
        ),

        html.Hr(),  # horizontal line

    ])


def selectData(contents, filename, date):

    content_type, content_string = contents.split(',')
    decoded = base64.b64decode(content_string)

    try:
        if 'csv' in filename:
            # Assume that the user uploaded a CSV file
            df = pd.read_csv(
                io.StringIO(decoded.decode('utf-8')))
        elif 'xls' in filename:
            # Assume that the user uploaded an excel file
            df = pd.read_excel(io.BytesIO(decoded))

        Dropdown = html.Div([
                            html.H4(('File Name: ', filename), style={'width': '100%', 'textAlign': 'center'}),
                            html.Br(),
                            dcc.Dropdown(
                                id='selected_col',
                                options=[{'label': i, 'value': i} for i in df.columns],
                                style={'width': '100%', 'height': '60px', 'lineHeight': '60px', 'borderWidth': '1px',
                                       'borderStyle': 'dashed', 'borderRadius': '5px', 'textAlign': 'center', 'display': 'inline-block'},
                                placeholder='Select Dataset Column'
                            ),
                            html.Br(),
                    ])
        return Dropdown

    except Exception as e:
        print(e)
        return html.Div([
            'There was an error processing this file.'
        ])



@app.callback(Output('output_filetype', 'children'),
              Output('output-data-upload', 'children'),
              Output('column_dropdown', 'children'),
              Input(component_id='file_type', component_property='value'),
              Input('upload-data', 'contents'),
              #Input('selected_col', 'value'),
              State('upload-data', 'filename'),
              State('upload-data', 'last_modified'))

def update_output(value, list_of_contents, list_of_names, list_of_dates):
    container = "{}".format(value)
    if list_of_contents is not None and value is not None:
        Dropdown = [selectData(c, n, d) for c, n, d in zip(list_of_contents, list_of_names, list_of_dates)]
        print(Dropdown[0])
        children = [
            parse_contents(c, n, d) for c, n, d in zip(list_of_contents, list_of_names, list_of_dates)
        ]
        return container, children, Dropdown
    else:
        return '','',''




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