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

OnaBai · Accepted Answer · 2014-05-20T15:35:18.427

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

enter image description here

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/

Only allow CSV Files in Kendo Upload

1 Answers1