AbortError: The operation was aborted when running on firefox

Dash Python
1

Hi,

I’m trying to create a download button using the Flask send_from_directory functionality. In the callback that handles that button there’s also another functionality concerning to a button that generates a pdf report. So the logic is the following:

  1. The user clicks on the generate report button and the application render the page and converts it to pdf
  2. At the end of this process, a download report button is generated, and the generate report button disappear.
  3. When the user clicks on this button the send_from_directory function is called and the file is downloaded to the user’s computer
  4. Finally, in the callback, when the download report button is clicked, some styles are returned, those styles guarantee that the generate report will appear again, and finally the download report will be disappeared (this is kind of a reset fucntionality)

In Chrome 76.0 this functionality works correctly, but in firefox 69.0 when I click on the Download Report button it downloads the report as expected but doesn’t “reset” the state (I mean the Download Report button doesn’t disappear and the generate report button doesn’t appear).

Looking on the browser console it shows this message:

AbortError: The operation was aborted

and the Dash app keeps on updating

This is the above mentioned callback

#callback for create the pdf report and generate the download button
@app.callback(
    [Output('download_report_button', 'children'),
    Output('download_report_button', 'style'),
    Output('report_button', 'style')],
    [Input ('report_button', 'n_clicks'),
    Input('download_report_button', 'n_clicks')],
    [State('e_lat1', 'value'),
    State('e_lng1', 'value'),
    State('e_lat2', 'value'),
    State('e_lng2', 'value'),
    State('result1_0', 'children'),
    State('result1_1', 'children'),
    State('result2_0', 'children'),
    State('graph_1', 'figure'),
    State('graph_2', 'figure'),
    ]
)
def generateReport(clicks_generate, clicks_download, lat_1, long_1, lat_2, long_2, result_1, result_2, result_3, graph_1, graph_2):
    dissapear = {
        'display': 'none',
        'color': 'white'
    }

    style_2 = {
        'display': 'flex',  
        'color': 'white',
        'background': '#011f4b'
    }

    style_3 = {
        'display': 'flex',  
        'color': 'white',
        'background': 'red'
    }

    image_analysis_flag = False

     

    if result_3 == "":
        image_analysis_flag = True
   

    ctx = dash.callback_context
    if not ctx.triggered:
        print("entered in not_triggered")
        return ["", dissapear, style_2]
    else:
        which_one = ctx.triggered[0]['prop_id'].split('.')[0]

    if which_one == 'report_button':
        
        if not image_analysis_flag:
            report = Report(lat_1, long_1, lat_2, long_2, result_1['props']['children'], result_2['props']['children'], graph_1, result_3 = result_3['props']['children'], graph_2 = graph_2).generateTemplate()
        else:
            report = Report(lat_1 = lat_1, long_1 = long_1, lat_2 = lat_2, long_2 = long_2, result_1 = result_1['props']['children'], result_2 = result_2['props']['children'], graph_1 = graph_1).generateTemplate()
        
        location = "/report/{}_reporte.pdf".format(report)

        
        download_button =  html.A("Descargar reporte", href = location, style = { "text-decoration" : "none", "color": "white",}) 
       
        
        return [download_button, style_3, dissapear]

    if which_one == 'download_report_button':
        
        return["", dissapear, style_2]
    
  
    return ["", dissapear, style_2]

I’d appreciate any idea on solving this problem