title: How can I display a pandas dataframe with a file I uploaded using the Dash upload component?
body: <p>I'm following this guide and documentation in uploading an excel file into a dashboard: <a href="https://dash.plot.ly/dash-core-components/upload" rel="nofollow noreferrer">https://dash.plot.ly/dash-core-components/upload</a></p>
  
  <p>I was wondering how I would display the results of my upload in a pandas dataframe. My code is outlined below. Essentially my table is a state breakdown of certain percentages and I'm trying to upload that into my dashboard.</p>
  
  <pre><code>import base64
  import datetime
  import io
  
  import dash
  from dash.dependencies import Input, Output, State
  import dash_core_components as dcc
  import dash_html_components as html
  import 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.Upload(
          id='upload-data',
          children=html.Div([
              'Drag and Drop or ',
              html.A('Select Files')
          ]),
          style={
              'width': '100%',
              'height': '120px',
              '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'),
  ])
  
  
  def parse_contents(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))
      except Exception as e:
          print(e)
          return html.Div([
              'There was an error processing this file.'
          ])
  
  def generate_table(df, max_rows=10):
      return html.Table(
          # Header
          [html.Tr([html.Th(col) for col in df.columns])] +
  
          # Body
          [html.Tr([
              html.Td(df.iloc[i][col]) for col in df.columns
          ]) for i in range(min(len(df), max_rows))]
      )
  
  external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
  
  app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
  
  app.layout = html.Div(children =[
      html.H4(children = 'test'),
      dcc.Dropdown( id = 'dropdown', options = [
          {'label' : i , 'value' : i} for i in df.state.unique()
      ],  multi = True, placeholder = 'Filter by State'),
      html.Div(id='table-container'),
          ])
  
  
  
  def display_table(dropdown_value):
  
      if dropdown_value is None:
          return generate_table(df)
  
  
      #x = df[df['state'] == str(dropdown_value)]
  
      return html.Div([
          html.H5(filename),
          html.H6(datetime.datetime.fromtimestamp(date)),
          generate_table(df[df['state'].isin(dropdown_value)])
  
  #app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})
  
  
  @app.callback(
      dash.dependencies.Output('table-container', 'children'),
      [dash.dependencies.Input('dropdown','value')])
  
  
  if __name__ == '__main__':
      app.run_server(debug=True)
  </code></pre>