How to upload excel file to server with kendo ui

Question

i am trying to upload an excel file to my server with kendo ui but nothing happens.The problem is in js on var upload as the #kupload is null and i dont know why

<div class="form-group">
<label for="kUpload">Select File for Upload </label> 
   <input type="file" id="kUpload"/>
 </div>

Upload

$(document).ready(function ()
{ $("#btn-kUpload").on("click", function (e) {
            e.preventDefault();


            var formData = new FormData();
            var upload = $("#kUpload").getKendoUpload();


            var files = upload.getFiles();
            formData.append('files', files[0].rawFile);

            // Send the request
            $.ajax({
                url: 'test.aspx/ImportExcel',
                type: 'POST',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function (response) {
                    console.log(response);
                }
            });
        });

Answer 1

You don't need to use ajax if you are using kendo components, kendo upload has built-in ajax request for sending files to the server.

NOTE : Generally every kendo component that communicates with server-side has own ajax function so you don't need to use $.ajax

You only need to define saveUrl:

    <input name="files" id="files" type="file" aria-label="files"/>

    $('#files').kendoUpload({
        async: {
            saveUrl: 'test.aspx/ImportExcel'
        },
        dropZone: '.drop-zone',
        multiple: true,
        clear: function () {

        },
        complete: function(){
         //This is called when all files are uploaded
        },
        success: function() {
         //This is called for every uploaded file
        },
        error: function () {

        },
        localization: {
            select: 'Upload file...'
        }
    });

Offical example: Upload component

Check documentation: Kendo UI Upload