Skip to main content

Custom File Delete Confirmation Dialog

It's possible to replace the default confirmation dialog and use your own custom delete confirmation dialog for File Upload Drag & Drop fields.

The above is an example using the Tailwind 4 example further below.

1

​Configure the Field inside the Form Builder

  • In the Remove File Confirmation Message setting, enter a custom message value, e.g. Are you absolutely sure?.
  • Toggle on the Use a Dialog element? setting.
  • In the Custom Confirm Dialog Selector setting, specify the CSS selector for your custom dialog, e.g. #my-confirm-dialog.
2

​Add your own Dialog code to the Template

  • Be sure to match the same CSS selector you set for the field inside the form builder.
  • Use the <dialog> HTML tag for the dialog.
  • Your OK button must have a value of ok for Freeform to register it correctly.
<dialog id="freeform-file-upload-confirm-dialog" open="">
  <form method="dialog">
    <p>{{ form.get("myFieldHandle").removeFileMessage }}</p>
    <menu>
      <button value="cancel">Cancel</button>
      <button value="ok">OK</button>
    </menu>
  </form>
</dialog>
Page Feedback