Allow to download a CSV file with a Multi-page Dash App

@ben13 wrote:

Hello,

I’m trying to combine 2 dash applications using dash.Location(url...). However, I have trouble to set a download click button or link with send_from_directory.

My files:

>
 -- app.py
 -- index.py
 -- apps
     |-- __init__.py
     |-- app1.py
     |-- app2.py     
     |-- output
        |-- file.csv
        |-- guide.pdf

app.py

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

index.py

from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html


from app import app
from apps import app1, app2


app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])

@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/apps/app1':
        return app1.layout
    elif pathname == '/apps/app2':
        return app2.layout
   
if __name__ == '__main__':
    app.run_server()

I would like to acces to my file guide.pdf using app1.py

app1.py

import dash
import dash_core_components as dcc
import dash_html_components as html

layout =   html.Div(
                 className='row',
                 style={'position': 'fixed', 'right': '20px'},
                 children=[
                      html.Button(
                            style={'background-color': 'red',
                                   'width': '50px',
                                   'height': '50px'},
                             children=[
                                  html.A(
                                     'Guide', 
                                     href='apps/output/guide.pdf', 
                                     target='_blank',
                                     style={'margin-left': '-20px'}
                                  ),
                             ],
                         ),
                     ],
                 ),

And I would like to download file.csv from app2.py using @app.route.server()

app2.py

layout = html.Div(
            style={'width': '50%', },
            children=[
                html.A(
                    children=['Download the csv file'], 
                    href='output/file.csv', 
                    style={'margin': '15px 0', 'font-size': '20px', 'padding': '15px', 
                           'text-align': 'center', 'vertical-align': 'middle', 'line-height': '75px',
                           'background-image': 'linear-gradient(to right, rgb(220, 227, 91), rgb(69, 182, 73))', 
                           'border-radius': '25px', 'display': 'inline-block', 'cursor': 'pointer',
                           'color': '#FFF'}
                ),
            ],
        ) 

@app.server.route('/output/<path:path>')
def download(path):
    root_dir = os.path.join(os.getcwd())
    return send_from_directory(root_dir, 'output')

All the other parts work well except the download part of the files. When I click on Download the csv file or html.A('Guide'), I just have a blank page…

Can anyone help me plz ?

Thanks !

Posts: 1

Participants: 1

Read full topic