[Dash Mantine Components] Drag and Drop Not Triggering Callback

Dash Python
1

Here’s a section of the code I’m working with:

def layout():
    grid = dmc.Grid(
        [
            dmc.Col(
                dcc.Upload(
                    [
                        "Drag and drop or ",
                        html.A(
                            "select a file",
                            href="javascript:void(0);",
                        ),
                    ],
                    id="upload",
                    accept=".xlsx",
                    style={
                        "width": "100%",
                        "height": "60px",
                        "lineHeight": "60px",
                        "borderWidth": "1px",
                        "borderStyle": "solid",
                        "borderRadius": "5px",
                        "textAlign": "center",
                        "borderColor": dmc.theme.DEFAULT_COLORS["gray"][8],
                        "fontWeight": "bold",
                    },
                ),
                mt=10,
                span=3,
            ),
        ],
        gutter="xl",
        grow=True,
    )

    return dmc.NotificationsProvider(
        [
            html.Div(id="notifications-container"),
            dmc.Container(
                [
                    grid,
                    dmc.Button(
                        "Generate", mt=30, w="100%", id="generate"
                    ),
                ]
            ),
        ]
    )

@app.callback(
    Output("upload", "children"),
    Input("upload", "contents"),
    State("upload", "filename"),
    prevent_initial_call=True,
)
def update_upload(filename, file_contents):
    print(filename)
    return no_update

For some reason, the callback isn’t triggering when I drag a file into the Div. When I click the Div, the file dialog window opens, and when I select a file the callback triggers correctly.

I tried a test app where I didn’t use Mantine, and the DnD triggered the callback correctly. So, I’m guessing there’s something with Mantine that’s causing the problem. Anyone have any idea what this could be?

Thanks in advance for any response!

2

Nevermind. I resolved my issue. It turns out the “accept” keyword argument won’t trigger the callback if you drag an unacceptable file format into the Upload component.