Display data after uploading

Dash Python
1

Hello,

My app takes an csv as one of the input, the users can drag, drop or select flie. I want to show the user a sample of the data after upload, in a pop-up window (or confirmation window). Is there any way to do that?

Thanks

2

For a popup window use dbc.Modal from https://dash-bootstrap-components.opensource.faculty.ai/l/components/modal

When the data loads, return the top 10 rows of the data to a table inside a modal with some kind of confirmation dialog.

3

I don’t have the pop-up windows using dbc.Modal

Here is my code using dash_bootstrap_components version 0.6.3 (I need to use that because I’m using Dash 0.42.0, and the migration to dash 1.x.x is not yet planned)

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

app = dash.Dash(
    __name__, meta_tags=[{"name": "viewport", "content": "width=device-width"}]
)
server = app.server

# Create app layout
app.layout = html.Div(
    [
        html.Div(
            [
                dbc.Button("Open modal", id="open"),
                dbc.Modal(
                    [
                        dbc.ModalHeader("Header"),
                        dbc.ModalBody("This is the content of the modal"),
                        dbc.ModalFooter(
                            dbc.Button("Close", id="close", className="ml-auto")
                        ),
                    ],
                    id="modal",
                ),
            ]
        )
    ],
    id="mainContainer",
    style={"display": "flex", "flex-direction": "column"},
)


@app.callback(
    Output("modal", "is_open"),
    [Input("open", "n_clicks"), Input("close", "n_clicks")],
    [State("modal", "is_open")],
)
def toggle_modal(n1, n2, is_open):
    if n1 or n2:
        return not is_open
    return is_open

# Main
if __name__ == "__main__":
    app.run_server(debug=True, host='0.0.0.0', port=8050)

open_modal

4

Make sure you add dbc.themes.BOOTSTRAP to external_stylesheets