CODEWITHSUNDEEP
asp.net-mvckendo-uikendo-upload
Marko
Marko

Reputation: 1401

Only allow CSV Files in Kendo Upload

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

Upvotes: 1

Views: 4635

Answers (1)

OnaBai
OnaBai

Reputation: 40887

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/

Upvotes: 4

Related Questions