Callback error updating

Dash Python
1

Hi guys,
I’m learning to use dash and want to try to get some output, but the result I get is an error like this.

Callback error updating ..output-data-upload.children...file-name-data-upload.children..

dash._grouping.SchemaTypeValidationError: Schema: [<Output `output-data-upload.children`>, <Output `file-name-data-upload.children`>]
Path: ()
Expected type: (<class 'tuple'>, <class 'list'>)
Received value of type <class 'NoneType'>:
    None

I have followed the tutorial from the following article, but the same error still appears.

and this my code.

import base64
import datetime
import io

import dash
import pandas as pd
from dash import dash_table, dcc, html
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate

dash.register_page(__name__, path='/rekomendasi', order=2)


def layout():
    return html.Div([
        html.Div([
            html.Div([
                html.Div(id='', className='bg-white p-5 shadow-lg rounded-lg', children=[
                    html.H1(
                        className='text-3xl font-bold leading-8',
                        children='Sistem Rekomendasi'
                    ),
                    html.P(
                        className='mb-4 mt-2 text-gray-500',
                        children='Sebelum melakukan perhitungan rekomendasi, diharuskan untuk mengupload dataset terlebih dahulu!'
                    ),

                    dcc.Upload(
                        id='upload-data',
                        children=html.Div([
                            'Drag and Drop or ',
                            html.A('Select Files')
                        ]),
                        accept='.csv, .xlsx, .xls',
                        multiple=False,
                        className='w-full h-16 border-2 border-dashed border-gray-400 rounded-lg flex justify-center items-center hover:bg-gray-100 hover:border-gray-500 duration-300 ease-in-out'
                    ),

                    html.Div(
                        id='file-name-data-upload',
                        className='flex justify-between',
                        children=[]
                    )
                ])
            ], className='w-[30%] w-full'),
            html.Div([
                html.Div(
                    id='output-data-upload',
                    children=[]
                ),
            ], className='w-[70%] bg-green-300 w-full'),
        ], className='flex flex-row gap-5'),

    ])


def parse_contents(content, filename, date):
    content_type, content_string = content.split(',')
    decoded = base64.b64decode(content_string)
    try:
        if 'csv' in filename:
            df = pd.read_csv(
                io.StringIO(decoded.decode('utf-8')))
        elif 'xls' in filename:
            df = pd.read_excel(io.BytesIO(decoded))
        elif 'xlsx' in filename:
            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([
        dash_table.DataTable(
            data=df.to_dict('records'),
            columns=[{'name': i, 'id': i} for i in df.columns],
            style_table={'overflowX': 'scroll'},
        ),
    ])

def generate_filename(filename):
    if filename is not None:
        return html.Div([
            html.P(
                id="file-name-data-upload",
                className='text-gray-500', 
                children=filename
            ),
            html.Button(id='', className='', children="x")
        ], className='flex flex-row w-full gap-3 justify-between items-center bg-gray-200 p-3 rounded-lg mt-5')
    else:
        return html.Div([])


@dash.callback(
    Output('output-data-upload', 'children'),
    Output('file-name-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_names is not None:
        children = [
            parse_contents(
                list_of_contents,
                list_of_names,
                list_of_dates
            )
        ]

        nama_file = [generate_filename(list_of_names)]

        return children, nama_file
2

Hi @alyasminn welcome to the forums. Try adding prevent_initial_call=True to the above callback.

I think you get this error because the callback is triggered at startup.

3

wow, its works.
thanks.

this my final code

@dash.callback(
    Output('output-data-upload', 'children'),
    Output('file-name-data-upload', 'children'),
    Input('upload-data', 'contents'),
    State('upload-data', 'filename'),
    State('upload-data', 'last_modified'),
    prevent_initial_call=True
)
1 Like