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

Question

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

975 views Asked by Chris At 29 April 2022 at 14:38

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" />

Original Q&A

There are 1 answers

**jpllosa** · Answer 1 · 2022-05-07 21:45:28

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>

TechQA.

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

There are 1 answers

Related Questions in JQUERY

Related Questions in KENDO-UI

Related Questions in KENDO-UPLOAD

Popular Questions

Popular Tags

Trending Questions