How to filter file kendo-ui upload?

Question

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 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, Jun 18 '14 at 11:23
Hi @DavidShorthose, I only want filter file when choose file to upload. — PeaceInMind, Jun 19 '14 at 00:35

score 8 · Accepted Answer · edited Mar 22 '17 at 20:14

8

To filter file, implement as below:

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

edited Mar 22 '17 at 20:14

Andrew

7,602
2
34
42

answered Jun 19 '14 at 00:34

PeaceInMind

1,147
3
11
32

1

This is something you must do, but then you should also validate with JavaScript, as the user can simply select *.* in the browse popup. – Andrew Mar 22 '17 at 20:15

score 3 · Answer 2 · answered Dec 07 '15 at 01:42

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");
                }
        }

score 1 · Answer 3 · answered Jun 18 '14 at 14:55

1

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();
    }
}

answered Jun 18 '14 at 14:55

HaBo

13,999
36
114
206

1

The problem is not the amount of files, that's already restricted in the admin's code. The normal way of doing this is directly prevent the browse popup to select more than one file and you are done. It would be a bad user experience if the user spends time selecting several files only to get an error message afterwards. – Andrew Mar 22 '17 at 20:16

score 1 · Answer 4 · answered Dec 28 '17 at 17:01

1

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

answered Dec 28 '17 at 17:01

Boubakr Echieb

127
1
17

How to filter file kendo-ui upload?

4 Answers4