Validation using Html.Telerik().Upload() with MVC3

Question

I am looking for sample code that would show how to set validation on the Html.Telerik().Upload() function so that the user can only upload .jpg files. I'd like to support just .jpg files.

Does anyone have any good examples or websites that I could use?

Answer 1

Unfortunately, filtering the extensions is not possible using Html.Telerik().Upload() due to the way browsers implement the <input type="file" />.

Source: http://www.telerik.com/community/forums/aspnet-ajax/upload/how-to-filter-out-unwanted-file-types-radupload.aspx

But, there is an alternative to do that with html and javascript:

HTML

<input name="fileToUpload" type="file" onchange="check_file()" >

javascript

function check_file(){
            str=document.getElementById('fileToUpload').value.toUpperCase();
    suffix=".JPG";
    suffix2=".JPEG";
    if(!(str.indexOf(suffix, str.length - suffix.length) !== -1||
                   str.indexOf(suffix2, str.length - suffix2.length) !== -1)){
    alert('File type not allowed,\nAllowed file: *.jpg,*.jpeg');
        document.getElementById('fileToUpload').value='';
    }
}

Source: https://stackoverflow.com/a/6788623/1304064

Answer 2

Please see the following Code. This code only accept jpeg/jpg, png format image. Also image size is restricted to 100KB.

@(Html.Telerik().Upload()
        .Name("EmployeeImageUpload")
        .Multiple(false)
        .Async(async => async
        .Save("SaveEmployeeImage", "Employee")
        .AutoUpload(false)
        )
        .ClientEvents(events => events
        .OnLoad("onLoad")
        .OnSelect("onSelect")
        .OnSuccess("onSuccess")
        )
    )


<script type="text/javascript">

    function onLoad(e) {
        $(this).find("input").attr("accept", "image\/jpeg,image\/jpg,image\/png");
    }

    function onSelect(e) {

        if (e.files[0].size > 102400) {
            alert('Image Size Should Be <= 100KB');
            e.preventDefault();
            return false;
        }            

        var ext =e.files[0].extension.toLowerCase();
        if ($.inArray(ext, ['.jpeg', '.jpg', '.png']) == -1) {
            alert('Only Supported Extension are jpeg/jpg, png');
            e.preventDefault();
            return false;
        }
        return true;
    }
</script>