dash dcc.Uploader not working in multipage app - plotly-dash

Question

0
I have a multi-page dash app for generating custom dashboards based on user submission. I'm trying to create a secondary page for uploading files. The problem is that the dcc.Upload or the callback function does not produce the expected behavior, that is: a html.Div that shows the uploaded data.
This is my secondary page, organized in tabs:
import dash
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
from dash import dash_table
from dash.exceptions import PreventUpdate
import os
import unicodedata
import requests
from bs4 import BeautifulSoup
from urllib.request import urlopen
from urllib.parse import quote as urlquote
import sqlite3
from dash_iconify import DashIconify
from dash.dependencies import Input, Output, State
import pandas as pd
from app import app
def layout():
return [
dmc.Tabs(
[
dmc.TabsList(
[
dmc.Tab("Import", value="import"),
dmc.Tab("Connect BD", value="connectbd"),
dmc.Tab("Explore", value="explore"),
]
),
dmc.TabsPanel(
html.Div([
dcc.Upload(
id='upload-data',
children=html.Div([
'Drag and Drop or ',
html.A('Select Files')
]),
style={
'width': '100%',
'height': '260px',
'lineHeight': '60px',
'borderWidth': '1px',
#'borderStyle': 'dashed',
'background' : '#f8f9fa',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '10px'
},
# Allow multiple files to be uploaded
multiple=True,
),
html.Div(id='output-data-upload'),
]),
value="import"),
dmc.TabsPanel("Settings tab content", value="connectbd"),
dmc.TabsPanel("Settings tab content", value="explore"),
],
#color="black",
orientation="horizontal",
)
]
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.'
])
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
# 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'
})
])
#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
Solution attempts: the example of the dcc.Upload is in the documentation , but I use it inside a tab inside a secondary page that is called with the layout function in the app.py. The example is working correctly when is run as it is implemented in the documentation, but I can´t adapt it to my specific use case. I think the problem is near the callback or in the function that outputs the table.
I´m a newbie in dash. Thanks in advance for any help.
Expted: html.Div with uploaded data.