How to restrict particular extension files to upload in kendo Upload.? with MVC razor view and jQuery

Question

we would like to restrict so many extensions while file uploading with mvc + kendo using "Kendo.upload" in razor view. and restriction function must be in javascript or jquery.

when user try to upload file with .Exe extension then give the alert like file format is not allowed.

Answer 1

This code snippet to your razor view. Make sure you have keno implemented in project.

@(Html.Kendo().Upload().Events(e => e.Upload("onUpload"))
                                                .Name("Files")
                                                .Async(a => a.Save("CustomDropZoneSave", "controller")
                                                    .Remove("CustomDropZoneRemove", "controller")
                                                    .AutoUpload(true)
                                                    )
                                                .Events(x => x.Success("onCustomDropZoneFileSuccess").Remove("onCustomDropZoneFileRemove"))
                                                .ShowFileList(true)
                                                .Multiple(false)
                                        )

Standard extensions we should not allow to update, goes to js file,

const BlockedFileFomates = ["exe", "ade", "adp", "apk", "appx", "appxbundle", "bat", "cab", "chm", "cmd", "com", "cpl", "dll", "dmg", "ex", "ex_", "exe", "hta", "ins", "isp", "iso", "jar", "js", "jse", "lib", "lnk", "mde", "msc", "msi", "msix", "msixbundle", "msp", "mst", "nsh", "pif", "ps1", "scr", "sct", "shb", "sys", "vb", "vbe", "vbs", "vxd", "wsc", "wsf", "wsh"];

Bellow is JS function which will prevent to upload above extensions.,

    function onUpload(e) {
            var files = e.files;
            $.each(files, function () {
                if (BlockedFileFomates.includes(this.extension.toLowerCase().replace('.', ''))) {
                    
                         //we do have this function to show toast message. use your way to show alert message.
                         /*func_CreateToastrNotification('info', `Blocked for security reasons!. Blocked extentions : ${BlockedFileFomates.toString()}`, `File formate ${this.extension.toLowerCase()} is not allowed.`);*/
                      
                        alert(`File formate ${this.extension.toLowerCase()} is not allowed.`);
                        e.preventDefault();
                    }
                });
            }

Explanation:

1. We have initiate "onUpload" event while load the kendo "Upload". important is ".Events(e => e.Upload("onUpload")" that it will execute when we try to upload any file.

2. BlockedFileFomates is constant which is holding the all extensions name which we gonna restricted.

3. js function onUpload will prevent the files to upload.