'Kendo UI Upload Error not firing when adding an invalid file type

For some reason or another, when I add an invalid file extension the error event isn't happening. Did I overlook something?

$(document).ready(() => {
  IniUploadJSONFile();
});

function IniUploadJSONFile() {
  $("#ImportJSONOrderFile").empty();
  $("#ImportJSONOrderFile").kendoUpload({
    async: {
      //saveUrl: ImportQuote,
      autoUpload: false,
      multiple: false
    },
    validation: {
      allowedExtensions: [".json"]
    },
    error: onError
  });
}

function onError(e) {
  var files = e.files;
  for (var i = 0; i < files.length; i++) {
    alert("Validation failed for " + files[i].name);

    var uid = files[i].uid;
    var entry = $(".k-file[data-uid='" + uid + "']");
    if (entry.length > 0) {
      entry.remove();
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.mobile.all.min.css">


<script src="https://kendo.cdn.telerik.com/2022.1.412/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.all.min.js"></script>


<input id="ImportJSONOrderFile" type="file" />
jquerykendo-uikendo-upload


Solution 1:[1]

Here is an example that will only accept .json file extension. You can run it in the Telerik DOJO.

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/datetimepicker/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.all.min.js"></script>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.mobile.all.min.css">

</head>
<body>
    <div id="example">
      <div class="demo-section k-content">
        <input id="ImportJSONOrderFile" type="file" />
      </div>
      
      <script>
        $(document).ready(() => {
                IniUploadJSONFile();
                });

        function IniUploadJSONFile() {
          $("#ImportJSONOrderFile").empty();
          $("#ImportJSONOrderFile").kendoUpload({
            async: {
              //saveUrl: ImportQuote,
              autoUpload: false,
              multiple: false
            },
            select: function(e) {
              $.each(e.files, function (index, value) {
                if (value.extension != ".json") {
                  alert("Invalid file type.");
                  e.preventDefault();
                }
                    });
            },
          });
        }
        </script>
            
    </div>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 jpllosa

Related Questions