# Adding Input to a dropdown from uploaded data **URL:** \ **Category:** Dash Python\ **Created:** [February 17, 2021, 1:04pm UTC](https://community.plotly.com/t/adding-input-to-a-dropdown-from-uploaded-data/50127 "2021-02-17T13:04:14Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![KofiM](https://avatars.discourse-cdn.com/v4/letter/k/f6c823/32.png) [@KofiM](https://community.plotly.com/u/KofiM)\ **Post date:** [February 17, 2021, 1:04pm UTC](https://community.plotly.com/t/adding-input-to-a-dropdown-from-uploaded-data/50127/1 "2021-02-17T13:04:14Z")
My first objective was to upload and parse a file (which I have accomplished with the sample code provided from dcc.Upload documentation). I now want to take that parsed data and display them in a drop down menu where later the end user can select an option from the dropdown and have a graph display. My current issue is I am not able to tie the parsed data to the dropdown and I am not sure why. I am new to Dash and any help in this matter would be greatly appreciated. ---
**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\ **Post date:** [February 17, 2021, 1:34pm UTC](https://community.plotly.com/t/adding-input-to-a-dropdown-from-uploaded-data/50127/2 "2021-02-17T13:34:03Z")
Hi @KofiM You need to bild a callback where the Output property is **(‘my\_dropdown’, ‘options’)** and into the callback generate a variable with this format: ```auto [{'label': 'option-1', 'value': 'op-1'}, {'label': 'option-2', 'value': 'op-2'}, {'label': 'option-n', 'value': 'op-n'}] ``` To get the elements from your file, if you are using a Pandas DataFrame and want to provide the elements of a series named “Name”: ```auto data_serie = my_table.Name.sort_values() options = [{'label': i, 'value': i} for i in data_serie] return options ``` ---
**Author:** ![KofiM](https://avatars.discourse-cdn.com/v4/letter/k/f6c823/32.png) [@KofiM](https://community.plotly.com/u/KofiM)\ **Post date:** [February 17, 2021, 2:15pm UTC](https://community.plotly.com/t/adding-input-to-a-dropdown-from-uploaded-data/50127/3 "2021-02-17T14:15:36Z")
I tried something like this, but to no avail. Is there an issue with how I am using the callback? ```auto import dash import dash_core_components as dcc import dash_html_components as html import plotly.express as px import pandas as pd import numpy as np from dash.dependencies import Input, Output, State app=dash.Dash( __name__ ) app.layout=html.Div( children=[ html.Div(children=[ html.Div(className='four columns div-users-controls', children=[html.P('Load Platemap'), html.Div(className='upload_cmpnme_data',children=[ dcc.Upload(id='upload-cmp_nme',children=html.Div([html.A('Select File')]), style={'width': '100%', 'height': '60px', 'lineHeight': '60px', 'borderWidth': '1px', 'borderStyle': 'dashed', 'borderRadius': '5px', 'textAlign': 'center', 'margin': '10px'},multiple=True), html.Div( className='div-for-dropdown', children=[ dcc.Dropdown(id='dropdwn', placeholder="Select Compound", multi=True, style={'backgroundColor':'#1E1E1E'}, className='drpdwn-guy'),], style={'color':'#1E1E1E','margin':'10px'}) ]),],)],)],) def take_to_dict(array): lst_to_dict=[] for i in range(len(array[0])): lst_to_dict.append({'label':array[:,i],'value':array[:,i]}) return lst_to_dict #Parse the data for relevant columns def parse_platemap(file_contents,fnme): f_t,f_content=file_contents.split(',') decode=base64.b64decode(f_content) try: cmp_data=pd.read_csv(io.StringIO(decode.decode('utf-8')),sep=',',header=None) cmpd_col=np.array([cmp_data.iloc[2:17,0]]) cmpd_lot=np.array([cmp_data.iloc[2:17,1]]) cmpd_tie=np.concatenate((cmpd_col,cmpd_lot),axis=0) creat_dict=take_to_dict(cmpd_tie) except: return html.Div("Data load Failed") return html.Div("Data loaded") @app.callback(Output('dropdwn','options'), Input('upload-cmp_nme', 'contents'), State('upload-cmp_nme','filename')) def update_opt(content,file_name): if content is not None: options=[parse_platemap(a,b) for a,b in zip(content,file_name)] return options if __name__ ==' __main__': app.run_server(debug=False) ``` ---
**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\ **Post date:** [February 17, 2021, 2:34pm UTC](https://community.plotly.com/t/adding-input-to-a-dropdown-from-uploaded-data/50127/4 "2021-02-17T14:34:17Z")
Hi @KofiM Tip for shearing code: ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/3/3b4d40045c4f0451887b959f8c048bf4605ec775.png) To find errors you can print elements in the callback that will be showed in the prompt command line. For example in your code you can add this prints: ```auto def update_opt(content,file_name): print(content, file_name) if content is not None: options=[parse_platemap(a,b) for a,b in zip(content,file_name)] print(options) return options ``` And review if the options variable is showed with the same format I writted before. Take present that you need to use prevent initial callback to avoid trigger the callback in first loading or in your case you can assign an empty ‘options’ using an **‘else:’** condition (in case content in None) ---
**Author:** ![KofiM](https://avatars.discourse-cdn.com/v4/letter/k/f6c823/32.png) [@KofiM](https://community.plotly.com/u/KofiM)\ **Post date:** [February 17, 2021, 2:38pm UTC](https://community.plotly.com/t/adding-input-to-a-dropdown-from-uploaded-data/50127/5 "2021-02-17T14:38:05Z")
Ty for code sharing tip. I’m sorry, I am not sure I follow your solution. Could you please clarify ---
**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\ **Post date:** [February 17, 2021, 2:52pm UTC](https://community.plotly.com/t/adding-input-to-a-dropdown-from-uploaded-data/50127/6 "2021-02-17T14:52:17Z")
just print the elements and see if they are showed the information as expected, also add an ‘options’ in the if statement for content equal to None: ```auto @app.callback(Output('dropdwn','options'), Input('upload-cmp_nme', 'contents'), State('upload-cmp_nme','filename')) def update_opt(content,file_name): print(content, file_name) if content is not None: options=[parse_platemap(a,b) for a,b in zip(content,file_name)] else: options=[{'label':"", 'value': ""}] print(options) return options ``` Then see if the callback is taking the content and the file name you are expecting and then if the options is bilding the apropiate format to send to the options output [{‘label’:“option-1”, ‘value’: “op-1”}, etc.] An additional tip: In the callback the def line must be written in the first line affter the @app.callback. Now I see that in your code there are a space line between them. ---
**Author:** ![KofiM](https://avatars.discourse-cdn.com/v4/letter/k/f6c823/32.png) [@KofiM](https://community.plotly.com/u/KofiM)\ **Post date:** [February 17, 2021, 6:41pm UTC](https://community.plotly.com/t/adding-input-to-a-dropdown-from-uploaded-data/50127/7 "2021-02-17T18:41:22Z")
Hi Eduardo, Seems like my data is being passed to the dropdown but the values are not displaying… ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/2/2116a9fa4ca5e0ec5b4fb9d5d4d8b0d7eda9e12f.png) ---
**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\ **Post date:** [February 17, 2021, 9:40pm UTC](https://community.plotly.com/t/adding-input-to-a-dropdown-from-uploaded-data/50127/8 "2021-02-17T21:40:15Z")
Show what is printing with print(options). ---
**Author:** ![KofiM](https://avatars.discourse-cdn.com/v4/letter/k/f6c823/32.png) [@KofiM](https://community.plotly.com/u/KofiM)\ **Post date:** [February 17, 2021, 9:59pm UTC](https://community.plotly.com/t/adding-input-to-a-dropdown-from-uploaded-data/50127/9 "2021-02-17T21:59:25Z")
![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/4/41270dfcfa2d7fa9bd2e20a13be12dd56e14c7f5.png) ---
**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\ **Post date:** [February 17, 2021, 10:11pm UTC](https://community.plotly.com/t/adding-input-to-a-dropdown-from-uploaded-data/50127/10 "2021-02-17T22:11:46Z")
Well, you need to change the way you are building the options variable because you are assigning arrays to the label and value options instead of strings. ---
**Author:** ![KofiM](https://avatars.discourse-cdn.com/v4/letter/k/f6c823/32.png) [@KofiM](https://community.plotly.com/u/KofiM)\ **Post date:** [February 17, 2021, 10:17pm UTC](https://community.plotly.com/t/adding-input-to-a-dropdown-from-uploaded-data/50127/11 "2021-02-17T22:17:53Z")
When I specify the index, I am able to pass that specific element to the dropdown successfully. But when I attempt to pass all the elements it seems to fail. Can you not assign multiple inputs at once? also I am able to pass an array if I specify the index is this a bug given that I’m passing np.arrays and not strings? ````auto try: cmp_data=pd.read_csv(io.StringIO(decode.decode('utf-8')),sep=',',header=None) cmpd_col=np.array([cmp_data.iloc[2:18,0]]) cmpd_lot=np.array([cmp_data.iloc[2:18,1]]) cmpd_tie=np.concatenate((cmpd_col,cmpd_lot),axis=0) OPTIONS=take_to_dict(cmpd_tie) except: return html.Div("Data load Failed") #print(type(OPTIONS)) return OPTIONS[1]``` ```` ---
**Author:** ![KofiM](https://avatars.discourse-cdn.com/v4/letter/k/f6c823/32.png) [@KofiM](https://community.plotly.com/u/KofiM)\ **Post date:** [February 17, 2021, 10:18pm UTC](https://community.plotly.com/t/adding-input-to-a-dropdown-from-uploaded-data/50127/12 "2021-02-17T22:18:02Z")
![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/9/957b7ae4bcfd394191ba730ec5284cbe9c71fb38.png) ---
**Author:** ![KofiM](https://avatars.discourse-cdn.com/v4/letter/k/f6c823/32.png) [@KofiM](https://community.plotly.com/u/KofiM)\ **Post date:** [February 17, 2021, 10:28pm UTC](https://community.plotly.com/t/adding-input-to-a-dropdown-from-uploaded-data/50127/13 "2021-02-17T22:28:11Z")
Solution found, I had to specify the index in the update\_function after the callback, and not in my parsing function. Thank you Eduardo! ```auto def update_output(contents,file_names): #print(contents,file_names) if contents is not None: options=[parse_platemap(a,b) for a,b in zip(contents,file_names)] else: options=[{'label':"",'value':""}] print(options) return options[0] ``` ---
**Author:** ![feedtaletwo](https://avatars.discourse-cdn.com/v4/letter/f/bbe5ce/32.png) [@feedtaletwo](https://community.plotly.com/u/feedtaletwo)\ **Post date:** [February 22, 2021, 3:33pm UTC](https://community.plotly.com/t/adding-input-to-a-dropdown-from-uploaded-data/50127/14 "2021-02-22T15:33:13Z")
I’m sorry, I am not sure I follow your solution. Could you please clarify [get-vidmate.com](https://get-vidmate.com) [instasave.onl](https://instasave.onl) ---
**Author:** ![KofiM](https://avatars.discourse-cdn.com/v4/letter/k/f6c823/32.png) [@KofiM](https://community.plotly.com/u/KofiM)\ **Post date:** [February 22, 2021, 3:47pm UTC](https://community.plotly.com/t/adding-input-to-a-dropdown-from-uploaded-data/50127/15 "2021-02-22T15:47:21Z")
My options variable is actually a list of dictionaries (16 total), when I originally returned options (return options) it was passed as a list of 1 element. Specifying the index fixed that and returns the 16 elements I originally wanted (return options[0]). ---
**Author:** ![shubharora734](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@shubharora734](https://community.plotly.com/u/shubharora734)\ **Post date:** [February 23, 2021, 1:36pm UTC](https://community.plotly.com/t/adding-input-to-a-dropdown-from-uploaded-data/50127/16 "2021-02-23T13:36:37Z")
I’m sorry, I am not sure I follow your solution. Could you please clarify ---
**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\ **Post date:** [February 23, 2021, 2:30pm UTC](https://community.plotly.com/t/adding-input-to-a-dropdown-from-uploaded-data/50127/17 "2021-02-23T14:30:47Z")
@feedtaletwo As I previously mentioned the option property needs the following format: ```auto [{'label': 'option-1', 'value': 'op-1'}, {'label': 'option-2', 'value': 'op-2'}, {'label': 'option-n', 'value': 'op-n'}] ``` It means two elements for each options: Label and value.