# Callback error updating

**URL:** <https://community.plotly.com/t/callback-error-updating/70771>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [December 12, 2022, 3:22pm UTC](https://community.plotly.com/t/callback-error-updating/70771 "2022-12-12T15:22:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![alyasminn](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/alyasminn/32/21935_2.png) [@alyasminn](https://community.plotly.com/u/alyasminn)\
**Post date:** [December 12, 2022, 3:22pm UTC](https://community.plotly.com/t/callback-error-updating/70771/1 "2022-12-12T15:22:51Z")

</div>

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.

```auto
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.

- [Multiple outputs in Dash - Now Available!](https://community.plotly.com/t/multiple-outputs-in-dash-now-available/19437)
- [Basic Dash Callbacks](https://dash.plotly.com/basic-callbacks)

and this my code.

```python
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

```

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [December 12, 2022, 4:30pm UTC](https://community.plotly.com/t/callback-error-updating/70771/2 "2022-12-12T16:30:20Z")

</div>

> [@alyasminn](#):
>
> ```auto
> @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'),
> )
> 
> ```

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.

---

<div class="post-metadata">

**Author:** ![alyasminn](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/alyasminn/32/21935_2.png) [@alyasminn](https://community.plotly.com/u/alyasminn)\
**Post date:** [December 13, 2022, 7:26am UTC](https://community.plotly.com/t/callback-error-updating/70771/3 "2022-12-13T07:26:12Z")

</div>

wow, its works.  
thanks.

this my final code

```python
@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
)

```