How to add a confirmation dialog in ASP.NET MVC File Upload

26 Aug 20262 minutes to read

You can customize the Uploader control to show a confirmation dialog before removing a file. This example uses the ej2 Dialog control as the confirmation dialog. Refer to the following example.

CSHTML

<div class="control_wrapper">
    @Html.EJS().Uploader("UploadFiles").Removing("onremove").AsyncSettings(new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Save", RemoveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove" }).Render()
    @Html.EJS().Dialog("dialog").Target("body").Visible(false).Width("250px").Content("Confirm to remove the file?").Buttons(ViewBag.confirmbutton).Render()
</div>

<script>
    var removeFile = [], dialog;

    window.onload = function () {
        dialog = document.getElementById("dialog").ej2_instances[0];
    }

    function onremove(args) {
        emoveFile = [];
        args.cancel = true;
        removeFile.push(args.filesData);
        dialog.show();
    }

    function onClick(args) {
        var uploadObj = document.getElementById("UploadFiles").ej2_instances[0];
        dialog.hide();
        uploadObj.remove(removeFile[0], false, true);
    }

    function Close() {
        dialog.hide();
    }
</script>

Index.css

.control_wrapper {
    max-width: 400px;
    margin: 0 auto;
}

Explore the ASP.NET MVC File Upload feature tour page to discover its groundbreaking features. You can also check out our ASP.NET MVC File Upload example to see how to browse and select files for upload to the server.