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

24 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

@{
    var 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" };
}
<div class="control_wrapper">
    <ejs-uploader id="UploadFiles" removing="onremove" asyncSettings="@asyncSettings">
    </ejs-uploader>
    <ejs-dialog id="dialog" target="body" visible="false" width="250px" content="Confirm to remove the file?">
        <e-dialog-buttons>
            <e-dialog-dialogbutton buttonModel="ViewBag.button" click="Close"></e-dialog-dialogbutton>
            <e-dialog-dialogbutton buttonModel="ViewBag.button1" click="onClick"></e-dialog-dialogbutton>
        </e-dialog-buttons>
    </ejs-dialog>

</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 Core File Upload feature tour page to discover its groundbreaking features. You can also check out our ASP.NET Core File Upload example to see how to browse and select files for upload to the server.