Unexpected "Error loading dependencies"

Dash Python
1

Hi,

I am a newbie in Dash/programming so please be patient. I want to create an app where the user upload two csv-s (in a predefined form), then I apply some transformation to it and then the user can download this as a csv file.

This is how the callbacks look like:

Upload file func

def parse_contents(contents, filename):
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')),sep=';',header=0)
    elif 'xls' in filename:
        # Assume that the user uploaded an excel file
        df = pd.read_excel(io.BytesIO(decoded),sep=';',header=0)

except Exception as e:
    print(e)
    return None
return df

Upload first .csv

@app.callback(Output(‘file1-output’, ‘data’),
[Input(‘file1-upload’, ‘contents’)],
[State(‘file1-upload’, ‘filename’)])

def update_outputtab1(contents, filename):
if contents is not None:
df = parse_contents(contents, filename)
return df
else:
return [{}]

Upload second .csv

@app.callback(Output(‘file2-output’, ‘data’),
[Input(‘file2-upload’, ‘contents’)],
[State(‘file2-upload’, ‘filename’)])

def update_outputtab2(contents, filename):
if contents is not None:
df = parse_contents(contents, filename)
return df
else:
return [{}]

create new file

@app.callback(Output(‘new-file’, ‘data’),
[Input(‘file1-output’, ‘data’),
Input(‘file2-output’, ‘data’),
Input(‘submit-mp’, ‘n_clicks’)])
def create_mpfile(file1, file2, n_clicks):
if n_clicks is None:
raise PreventUpdate
else:
res = create_new(file1, file2) # returns a pd.DataFrame
return res

Until this point I think it is working as intended, but when I want to add a download link:

@app.callback(
Output(‘download-link’, ‘href’),
[Input(‘new-file’, ‘data’)])
def update_download_link(dff):
csv_string = dff.to_csv(index=False, encoding=‘utf-8’)
csv_string = “data:text/csv;charset=utf-8,%EF%BB%BF” + urllib.parse.quote(csv_string)
return csv_string

It gives “Error loading dependencies”. Could you please help me with this error?
Thank you in advance!

2

Could you post the layout as well? Thus far it looks pretty close to the normal approach for client-side downloads.

3

Hi,

I use some custom CSS, the layout looks like:

app.layout = html.Div(id = 'dash-body', className = 'app-body', children = [
                    html.Div([
                            html.Div(id = 'dash-control-tabs', className = 'control-tabs', children = [
                                    dcc.Tabs(
                                            id = 'dash-tabs',
                                            children = [
                                                    dcc.Tab(
                                                            label = 'Upload',
                                                            value = 'dash-tab-select',
                                                            children = html.Div(className = 'control-tab', children = [
                                                                    html.Div(className = 'app-controls-block', children = [
                                                                            html.Div(className = 'fullwidth-app-controls-name',
                                                                                     children = 'Upload file 1'),
                                                                            html.Div(id = 'dash-file-upload-container1', children = [
                                                                                    dcc.Upload(
                                                                                            id = 'file1-upload',
                                                                                            className = 'control-upload',
                                                                                            children = html.Div([
                                                                                                    'Drag and Drop .csv file'
                                                                                                    ]),
                                                                                                )
                                                                                        ]),
                                                                            html.Hr(),
                                                                            html.Div(className = 'fullwidth-app-controls-name',
                                                                                     children = 'Upload file 2'),
                                                                            html.Div(id = 'dash-file-upload-container2', children = [
                                                                                    dcc.Upload(
                                                                                            id = 'file2-upload',
                                                                                            className = 'control-upload',
                                                                                            children = html.Div([
                                                                                                    'Drag and Drop .csv file'
                                                                                                    ]),
                                                                                                )
                                                                                        ]),
                                                                            html.Hr(),
                                                                            html.Div(id = 'submit-download', children = [
                                                                                    html.Button('Submit',id = 'submit-mp'),
                                                                                    html.Div(html.A(id='download-link', children='Download File'), style = {'width': '49%', 'display': 'inline-block'})
                                                                                    ])
                                                                            
                                                                            ])
                                                                            ])
                                                            ),```






app = dash.Dash(__name__)
server = app.server
app.scripts.config.serve_locally = True
app.config['suppress_callback_exceptions'] = True

if __name__ == "__main__":
    app.run_server(debug = True)
4

Does it change the behavior if you add the download and target params as below:

                        html.A('Download File',
                                id='download_link',
                                download="blank.csv",
                                href="",
                                target="_blank"
                        ),
5

Unfortunately it gives the same error, I also tried with different browsers (IE/Firefox) but that didn’t help either.

6

@crittter The code from your original entry seems incomplete (file1-output does not exist and the layout is not closed out). I’ve modified it into a running version and included the callbacks below. I get the following (different) error:

dash.exceptions.NonExistentIdException:
                            Attempting to assign a callback to the
                            component with the id "file1-output" but no
                            components with id "file1-output" exist in the
                            app's layout.


                            Here is a list of IDs in layout:
['dash-control-tabs', 'dash-tabs', 'dash-file-upload-container1', 'file1-upload', 'dash-file-upload-container2', 'file2-upload', 'submit-download', 'submit-mp', 'download-link', 'dash-body']

Will need two things in order to help you:

  1. The version of dash and its components you are currently running (pip list | grep dash)
  2. The minimal code necessary to reproduce the issue you are experiencing

The code I ran:

import json
import pandas as pd

import dash
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate

import dash_table
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(
    id = 'dash-body',
    className = 'app-body',
    children = [
        html.Div([
            html.Div(
                id = 'dash-control-tabs',
                className = 'control-tabs',
                children = [
                    dcc.Tabs(
                        id = 'dash-tabs',
                        children = [
                            dcc.Tab(
                                label = 'Upload',
                                value = 'dash-tab-select',
                                children = [
                                    html.Div(
                                        className = 'control-tab',
                                        children = [
                                            html.Div(
                                                className = 'app-controls-block',
                                                children = [
                                                    html.Div(
                                                        className = 'fullwidth-app-controls-name',
                                                        children = 'Upload file 1'
                                                    ),
                                                    html.Div(
                                                        id = 'dash-file-upload-container1',
                                                        children = [
                                                            dcc.Upload(
                                                                id = 'file1-upload',
                                                                className = 'control-upload',
                                                                children = 'Drag and Drop .csv file'
                                                            )
                                                        ]
                                                    ),
                                                    html.Hr(),
                                                    html.Div(
                                                        className = 'fullwidth-app-controls-name',
                                                        children = 'Upload file 2'
                                                    ),
                                                    html.Div(
                                                        id = 'dash-file-upload-container2',
                                                        children = [
                                                            dcc.Upload(
                                                                id = 'file2-upload',
                                                                className = 'control-upload',
                                                                children = 'Drag and Drop .csv file'
                                                            )
                                                        ]
                                                    ),
                                                    html.Hr(),
                                                    html.Div(
                                                        id = 'submit-download',
                                                        children = [
                                                            html.Button('Submit',id = 'submit-mp'),
                                                            html.Div(
                                                                children=[
                                                                    html.A(
                                                                        id='download-link',
                                                                        children='Download File'
                                                                    )
                                                                ],
                                                                style = {'width': '49%', 'display': 'inline-block'}
                                                            )
                                                        ]
                                                    )
                                                ]
                                            )
                                        ])])])])])])

@app.callback(Output("file1-output", "data"), [Input("file1-upload", "contents")], [State("file1-upload", "filename")])
def update_outputtab1(contents, filename):
    if contents is not None:
        df = parse_contents(contents, filename)
        return df
    else:
        return [{}]

@app.callback(Output("file2-output", "data"), [Input("file2-upload", "contents")], [State("file2-upload", "filename")])
def update_outputtab2(contents, filename):
    if contents is not None:
        df = parse_contents(contents, filename)
        return df
    else:
        return [{}]

@app.callback(Output("new-file", "data"), [Input("file1-output", "data"), Input("file2-output", "data"), Input("submit-mp", "n_clicks")])
def create_mpfile(file1, file2, n_clicks):
    if n_clicks is None:
        raise PreventUpdate
    else:
        res = create_new(file1, file2) # returns a pd.DataFrame
        return res

@app.callback(Output("download-link", "href"), [Input("new-file", "data")])
def update_download_link(dff):
    csv_string = dff.to_csv(index=False, encoding="utf-8")
    csv_string = "data:text/csv;charset=utf-8,%EF%BB%BF" + urllib.parse.quote(csv_string)
    return csv_string

app.scripts.config.serve_locally = True
app.config['suppress_callback_exceptions'] = True

if __name__ == "__main__":
    app.run_server(debug = False)