How to delete files from folder and update layout with remaining files?

Dash Python
1

I want when the user clicked on the delete button, a specific file was deleted and the updated data was shown at the same time

here is an example you can use. In order for the code to work, you need to create a datasets folder and paste the csv file there

import dash
from datetime import datetime
import dash_mantine_components as dmc
from dash import html, dcc, callback, Input, Output, ALL, MATCH, ALLSMALLER, ctx
import os
from dash_iconify import DashIconify

app = dash.Dash(__name__)


header = [
        html.Thead(
            html.Tr(
                [
                    html.Th("Name"),
                    html.Th("Created"),
                    html.Th("Features"),
                    html.Th("Samples"),
                    html.Th("Size"),
                    html.Th("Actions"),
                ]
            )
        )
    ]
ar = []
for j in os.listdir('datasets/'):
    ar.append(html.Tr([
        html.Td(f'{j}'),
        html.Td(datetime.today().strftime('%Y-%m-%d')),
        html.Td(f'{10}'),
        html.Td(f'{1000}'),
        html.Td('1.2mb'),
        dmc.ActionIcon(DashIconify(icon="ep:delete-filled"),
                        id={"index": f'{j}'}, n_clicks=0)
    ]))
body = [html.Tbody(ar)]
table = html.Center([dmc.Table(header + body)])

app.layout = html.Div([
        table,
        dmc.NotificationsProvider(
            html.Div(

                html.Div(id="test7"),

            )
        )
    ])

@callback(
    Output('test7', 'children'),
    Input({'index': ALL}, 'n_clicks'),
    prevent_initial_call=True
)
def test(n_clicks):
    os.remove('datasets/'+ctx.triggered_id['index'])
    return dmc.Notification(
        title="Warning!",
        id="simple-notify2",
        action="show",
        message=f"Removed file {ctx.triggered_id['index']}",
        icon=[DashIconify(icon="emojione-v1:warning")],
    )


if __name__ == '__main__':
    app.run_server(debug=True)
1 Like
2

hi @Sohibjon
Thank you please clarify your question. I am not sure if you’re just sharing the code or if you’re looking to solve something. Thank you.

3

when you run this code, all datasets appear in the datasets folder along with the delete buttons, when clicked, I want the specific dataset to be deleted and at the same time the list of the remaining datasets is updated. At the moment I can delete the dataset, but the list is not updated

4

hi @Sohibjon
you can rebuild the children of the html.Tbody (the ar list in your case) inside the callback and return that new list. Try this:

import dash
from datetime import datetime
import dash_mantine_components as dmc
from dash import html, dcc, callback, Input, Output, ALL, MATCH, ALLSMALLER, ctx
import os
from dash_iconify import DashIconify

app = dash.Dash(__name__)


header = [
        html.Thead(
            html.Tr(
                [
                    html.Th("Name"),
                    html.Th("Created"),
                    html.Th("Features"),
                    html.Th("Samples"),
                    html.Th("Size"),
                    html.Th("Actions"),
                ]
            )
        )
    ]
ar = []
for j in os.listdir('datasets/'):
    ar.append(html.Tr([
        html.Td(f'{j}'),
        html.Td(datetime.today().strftime('%Y-%m-%d')),
        html.Td(f'{10}'),
        html.Td(f'{1000}'),
        html.Td('1.2mb'),
        dmc.ActionIcon(DashIconify(icon="ep:delete-filled"),
                        id={"index": f'{j}'}, n_clicks=0)
    ]))
body = [html.Tbody(children=ar, id='the-table')]
table = html.Center([dmc.Table(header + body)])

app.layout = html.Div([
        table,
        dmc.NotificationsProvider(
            html.Div(

                html.Div(id="test7"),

            )
        )
    ])

@callback(
    Output('the-table', 'children'),
    Output('test7', 'children'),
    Input({'index': ALL}, 'n_clicks'),
    prevent_initial_call=True
)
def test(n_clicks):
    os.remove('datasets/'+ctx.triggered_id['index'])

    ar = []
    for j in os.listdir('datasets/'):
        ar.append(html.Tr([
            html.Td(f'{j}'),
            html.Td(datetime.today().strftime('%Y-%m-%d')),
            html.Td(f'{10}'),
            html.Td(f'{1000}'),
            html.Td('1.2mb'),
            dmc.ActionIcon(DashIconify(icon="ep:delete-filled"),
                           id={"index": f'{j}'}, n_clicks=0)
        ]))

    return ar, dmc.Notification(
        title="Warning!",
        id="simple-notify2",
        action="show",
        message=f"Removed file {ctx.triggered_id['index']}",
        icon=[DashIconify(icon="emojione-v1:warning")],
    )


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

I really like this example that you build. It’s very useful. Thank you for sharing with us.

5

Hi @Sohibjon Can you share the csv file?