Calling JavaScript function (with a className parameter) in callback Dash app for modal

I have been struggling to generate a modal in my dash app. I did place both the .css and .js files in the assets folder but I am not sure about the syntax to call the .js function within a callback, the .js function takes in a .css parameter then actives it so it has the popup(modal) effect based on whether the corrected file…

.css file containing the modal code

.popup_File {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%) scale(0);
  transition: 500ms ease-in-out;
  border: 1px solid black;
  border-radius: 10px;
  z-index: 10px;
  width: 500px;
  max-width: 80%;
}
.popup_File.active{
  transform: translate(-50%, 50%) scale(1);
}

.js code the Javascript function for activating the modal in the css file

function openmodal(popup){
  if (popup == null) return
  popup.classList.add('active')
  document.write('see')
}

callback where I want to actually activate the css modal(see comment)->

 import dash_bootstrap_components as dbc 
import dash_bootstrap_components as dbc 
import dash_core_components as dcc 
import dash_html_components as html 
from dash.dependencies import Input, Output, State, ClientsideFunction 

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.JOURNAL])
app.layout = html.Div(
                className = 'popup_File',
                id = 'Wrong_file',
                children = [
                        html.Div( 
                            className = 'header', 
                            children = [
                                html.Div("Invalid file type", className = 'title'),
                                html.Button('&times', className = 'Close_wrongFile', id = 'File')]),
                        html.Div('The file you have uploaded does not have the vcf file extension.', className = 'Warning_wrongfile')
                    ]
    )

#Call back for checking uploaded file
    
    @app.callback(
    Output('place_Filename', 'children'),
    [Input('VCF', 'contents')],
    [State('VCF', 'filename')]
    )
    def VCF_processing(contents, filename):
    if filename is None:
        layout = html.Div(
        [
            html.H6(
                'Drag and Drop .vcf '
            )
        ]
        ) 
        return layout
    else:
        if '.vcf' not in filename:
        #... I want to call the .js function here to tell the user that an incorrect file has been uploaded
            return warning modal

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

I have been struggling badly trying to find the correct syntax to use and how to put .js code and calling the function in the assets folder with the correct parameter in Python dash. Please help!!

1 post - 1 participant

Read full topic