I'm using kendo-ui upload, I want to filter file (only allow choose .jpg, .png), but I don't know to implement in javascript, please help me!

1- .cshtml file

<input name="files" id="files" type="file" />

2- JavaScript

$(document).ready(function () {
    $("#files").kendoUpload({
        multiple: false,

        async: {
            saveUrl: "Home/Save"
        }
    });
});

I'm using kendo-ui upload, I want to filter file (only allow choose .jpg, .png), but I don't know to implement in javascript, please help me!

1- .cshtml file

<input name="files" id="files" type="file" />

2- JavaScript

$(document).ready(function () {
    $("#files").kendoUpload({
        multiple: false,

        async: {
            saveUrl: "Home/Save"
        }
    });
});

• javascript
• jquery
• kendo-ui
• kendo-upload

• I'm not quite sure what you mean with your question. Do you just want to be able to upload a maximum of one file from this page? – David Shorthose Commented Jun 18, 2014 at 11:23
• Hi @DavidShorthose, I only want filter file when choose file to upload. – PeaceInMind Commented Jun 19, 2014 at 0:35

4 Answers 4

To filter file, implement as below:

<input name="files" id="files" type="file" accept=".jpg,.png"/>

Specify a 'select' event handler when you initialise your kendo upload widget:

$(document).ready(function () {
    $("#files").kendoUpload({
        multiple: false,
        async: {
            saveUrl: "Home/Save"
        },
        select: onSelect,
    });
});

Then use this to handle the file select event:

        function onSelect(e) {
            var files = e.files
            var acceptedFiles = [".jpg", ".jpeg", ".png", ".gif"]
            var isAcceptedImageFormat = ($.inArray(files[0].extension, acceptedFiles)) != -1

            if (!isAcceptedImageFormat) {
                   e.preventDefault();
                   alert("Image must be jpeg, png or gif");
                }
        }

You have to use OnSelect Event for that and restrict the count you want to.

http://docs.kendoui.com/api/web/upload#select

http://demos.kendoui.com/web/upload/events.html

function onSelect(e) {
    if (e.files.length > 1) {
        alert("Please select only 1 file.");
        e.preventDefault();
    }
}

add validation to the input file options us below:

validation: {
 allowedExtensions: [".gif", ".jpg", ".png"]
}

check this demo if you are looking for more : https://demos.telerik.com/kendo-ui/upload/validation