From our previous tutorials, you already know how to list files from a folder on your page. Now we are going to add a delete button for each of the files, which when clicked will remove the selected file. Click inside the repeat region(1) and add a form (2-4).
Add a hidden field inside the form (1-4).
Let's change its default name to something else. We call our hidden field "file" (1-2).
Add a submit button inside the form (1-4).
Change its value so the users know it is a delete button (1-2).
Save your page and create a new server action (1). Add a name for it (2). Select globals(3) and link your page (4-6).
Select your form from the dropdown and click the import button (1-2). You can see that your hidden field has been imported under post (3). Right click steps (4).
Add remove file step (1-2).
Click the dynamic data picker to select the file path (1). Expand post(2) and select the hidden field, which we imported (3-4). Save your server action(5) and open the app connect panel (6).
Let's bind a dynamic value to the hidden field. It will be used to delete the file, so we need to bind the path returned by the list files server action. Click the hidden field (1). Add a new dynamic attribute (2). Under input (3), select value (4).
Click the dynamic data button (1). And select the path binding returned in the repeat region, which you are using to list the files (2-3).
Select the form in the app connect tree (1), and change its handler to server connect (2-3).
Select your delete files server action (1-3).
Now, we need to reload the list files server action when a file is deleted. Add a new dynamic event (1). Under server connect (2), select on success (3).
Select the action to be executed. Click load, under the server action which you use to list files on the page (1-3).
And we are done! Let's preview the results.
That's how easy it is to delete files using DMXzone File System connector.