CODEWITHSUNDEEP
asp.net-mvckendo-uikendo-asp.net-mvckendo-upload
Uchitha
Uchitha

Reputation: 1038

Kendo MVC Upload - Batch Upload

I'm using Kendo UI MVC Upload control to upload multiple files at once (i.e batch). The documentation is quite clear on what to do, but I'm seeing separate upload requests for each file instead of single upload request for all.

Here's my code for upload control

 Html.Kendo().Upload().Name("files")
     .TemplateId("fileUploadTemplate")
     .Events(e =>
      {
         e.Upload("onFileUpload");
      })
      .HtmlAttributes(new { accept = ".xls,.csv" })
      .Messages(m => m.Select("Select Files..."))
      .Async(a => a.Save("Upload", "Home").AutoUpload(false).Batch(true))

I use kendo template to add 2 more fields (start & end date) against each uploaded file as shown below.

How the upload control is rendered on screen

Here's the template code.

<script id="fileUploadTemplate" type="text/x-kendo-template">
      #var fileCount = $(".k-file .row").length;#
      #var startId = 'PeriodStart_' + fileCount; #
      #var endId = 'PeriodEnd_' + fileCount; #

      <span class="k-progress"></span>
      <div class="row">
        <div class="col-md-4">
          <span class="k-filename"><strong>#=name#</strong></span>
        </div>
        <div class="col-md-3 nopadding">
          Start: @(Html.Kendo().DatePicker().Name("#=startId#").ToClientTemplate())
        </div>
        <div class="col-md-3 nopadding">
          End: @(Html.Kendo().DatePicker().Name("#=endId#").ToClientTemplate())
        </div>
        <div class="col-md-1 text-right">
          <button type="button" class="k-upload-action"></button>
        </div>
   </div></script>

Here's the event handling js code which gathers Start & End date for each file and constructs a json object to be sent to the backend along with multiple files.

function onFileUpload(e) {
    var fileInfo = getUploadFileMetaData();        
    var modelAsJson = JSON.stringify(fileInfo);
    console.log(modelAsJson);
    e.data = {
        modelAsJson: modelAsJson
    };
}
function getUploadFileMetaData() {
    var numOfFiles = $(".k-file .row").length;
    var fileInfoArray = [];
    for (var i=0; i<numOfFiles;i++){
        var fi = {
            FileName: $(".k-filename strong")[i].innerText, //Filename is required as is since it'll be our key
            PeriodStart: $("#PeriodStart_" + i).data('kendoDatePicker').value(),
            PeriodEnd: $("#PeriodEnd_" + i).data('kendoDatePicker').value()
        }
        fileInfoArray[i] = fi;
    }
    return fileInfoArray;
}

So if I select 2 files to be uploaded I will see 2 different requests fired to the Controller Action instead of 1. I'm sure I'm not seeing something straight forward and appreciate any show and tell.

Upvotes: 1

Views: 5428

Answers (2)

Chris J
Chris J

Reputation: 635

I've managed to get Kendo Upload working perfectly in Batch mode. Basically, you can upload all your files to the browser, then submit the form normally and have them uploaded to the server and/or deleted at the same time.

More details here: https://kolaberate.com/Articles/2019/08/29/implementing-batch-mode-using-kendo-upload-control-for-asp-net-core/

Upvotes: 0

Uchitha
Uchitha

Reputation: 1038

I've found the answer by cross posting in Telerik Forum.

Apparently this is not possible to do. The batch mode of operation is only possible when user selects multiple files at one go (Ctrl + Select), not when she selects them one after the other by clicking the select files button multiple times. Putting it in another way batch mode is possible, only when the upload control has 1 line item - be it 1 or more files.

More details here - http://www.telerik.com/forums/batch-mode---not-working

Upvotes: 1

Related Questions