Upload mutiples CSV Excel
Tags: #dashboard #plotly #dash #naas #upload #csv
Description: This notebook allows users to upload multiple CSV and Excel files to create interactive visualizations with Dash.
import os
try:
import dash
except:
!pip install dash --user
import dash
try:
import dash_bootstrap_components as dbc
except:
!pip install dash_bootstrap_components --user
import dash_bootstrap_components as dbc
from dash import Dash, dcc, html, Input, Output, State
import pandas as pd
import base64
import datetime
import io
from dash import dcc, html, dash_table
DASH_PORT = 8050
PLOTLY_LOGO = "https://images.plot.ly/logo/new-branding/plotly-logomark.png"
# this example that adds a logo to the navbar brand
logo = dbc.Navbar(
dbc.Container(
[
html.A(
# Use row and col to control vertical alignment of logo / brand
dbc.Row(
[
dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
dbc.Col(dbc.NavbarBrand("Dash App", className="ms-2")),
],
align="center",
className="g-0",
),
href="https://plotly.com",
style={"textDecoration": "none"},
)
],
),
color="dark",
dark=True,
className="mb-5",
)
app = dash.Dash(
requests_pathname_prefix=f'/user/{os.environ.get("JUPYTERHUB_USER")}/proxy/{DASH_PORT}/',
external_stylesheets=[dbc.themes.BOOTSTRAP],
meta_tags=[
{"name": "viewport", "content": "width=device-width, initial-scale=1.0"}
],
)
# app = dash.Dash() if you are not in Naas
# App title
app.title = "Naas - Dash Plotly"
app.layout = html.Div(
[
logo,
dcc.Upload(
id="upload-data",
children=dbc.Button(
[
"Drag and Drop or ",
html.A("Select Files"),
],
style={"padding": "10px"},
className="d-grid gap-2 col-6 mx-auto",
),
# 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 or "xlsx" 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."])
return html.Div(
[
html.H5(f"✅ {filename} updated in Dash"),
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
# For debugging, display the raw contents provided by the web browser
html.Div("Raw Content"),
html.Pre(
contents[0:200] + "...",
style={"whiteSpace": "pre-wrap", "wordBreak": "break-all"},
),
],
style={"padding": "30px"},
)
@app.callback(
Output("output-data-upload", "children"),
Input("upload-data", "contents"),
State("upload-data", "filename"),
State("upload-data", "last_modified"),
)
def update_output(list_of_contents, list_of_names, list_of_dates):
if list_of_contents is not None:
children = [
parse_contents(c, n, d)
for c, n, d in zip(list_of_contents, list_of_names, list_of_dates)
]
return children
if __name__ == "__main__":
app.run_server(proxy=f"http://127.0.0.1:{DASH_PORT}::https://app.naas.ai")