Only allow CSV Files in Kendo Upload

Question

How can I restrict Kendo upload to CSV files?

Razor:

@(Html.Kendo().Upload()
        .Name("import-file")
        .Multiple(false)
        .ShowFileList(true)
        .Async(a => a
            .Save("Save", "Import")
            .Remove("Remove", "Import")
            .AutoUpload(false)
        )
        .Events(events => events.Select("App.Import.select"))
    )

Javascript:

 Import: {
    select: function (event) {
        $.each(event.files, function (index, value) {
            if (value.extension !== '.csv') {
                alert("not allowed!");
            }

            console.log("Name: " + value.name);
            console.log("Size: " + value.size + " bytes");
            console.log("Extension: " + value.extension);
        });
        var breakPoint = 0;
    }    
}

My Idea is to remove the file in the select event. How can I accomplish this?

Regards, Marko

Answer 1

According to the documentation here, what you should do is to cancel the event (e.preventDefault()).

So, since you are not allowing multiple file selection, what you should do is:

select: function (event) {
    var notAllowed = false;
    $.each(event.files, function (index, value) {
        if (value.extension !== '.csv') {
            alert("not allowed!");
            notAllowed = true;
        }

        console.log("Name: " + value.name);
        console.log("Size: " + value.size + " bytes");
        console.log("Extension: " + value.extension);
    });
    var breakPoint = 0;
    if (notAllowed == true) e.preventDefault();
}    

Example here: http://jsfiddle.net/OnaBai/n5Y2s/1/