How do I limit Kendo UI Web Upload To allow only a single upload?

Question

I am currently using Kendo UI for uploading files to a DB Using MVC3 and Razor and Entity Framework. I have it working great in several areas of my site, except when I need to restrict it to allowing only a singular upload. I have multiple set to false, which I need to disallow multiple selections, but the user is still allowed to click the select button any number of times to add files, violating the requirements for this field in the DB.

I tried some suggestions I thought I found on their site, but they are referring to the current selected items sent in the current request, not the whole of the uploads list (see image below).

<script type="text/javascript">
  function singleFile(e) {
    var files = e.files;
    if (e.files.length > 1) {
      alert('Only one file may be uploaded, cancelling operation...');
      e.preventDefault();
    }
  }
</script>

@(Html.Kendo().Upload()
  .Name("resumeAttachments")
  .Multiple(false)
  .Async(async => async
      .Save("ResumeSave", "File")
  )
  .Events(c => c
      .Upload("resumeOnUpload")
  )
  .Events(c => c
      .Success("resumeOnSuccess")
  )
  .Events(c => c
      .Complete("singleFile")
  )
)

Answer 1

After I was given the requirement to prevent multiple uploads I stumbled across this page.
"multiple" set to FALSE works just fine if it is done correctly.

(While you CAN use the Kendo Razor syntax, notice when you view the page source that the .Kendo() actually gets converted to .kendoUpload

Thus I prefer this syntax in javascript (after the @using):

@using Kendo.Mvc.UI;

<script type="text/javascript">

$(document).ready(function() {
    $("#files").kendoUpload({"multiple":false,
        async: {
            saveUrl: '@Url.Action("Save", "Upload", new { typeOfUploadedFile= @Model.DocName.ToString(), @proposalNo = @Model.ProposalNo.ToString(),  area = ""})',
            removeUrl: '@Url.Action("Remove", "Upload")',
            autoUpload: true
        }
    });
});   

</script>

Answer 2

After a little bit of thinking over the weekend (and a long weekend of vacation to relax), it hit me... Changing the singleFile function to the following will disable the control after the file is uploaded.

function singleFile(e) {
  var upload = $("#resumeAttachments").data("kendoUpload");

  // disables the upload after upload
  upload.disable();
}

Answer 3

You must multiple property of kendo upload set value to false;
for example @(Html.Kendo().Upload().Multiple(false))

Answer 4

I know this is a really old thread, however i just want to post the issues we have encounted as well. Adding Multiple with async upload would work with below simple code

$("#files").kendoUpload({
                        multiple : false,
                        async : {
                                saveUrl : FileUploadURL,
                                removeUrl : FileRemoveURL,
                                autoUpload : true
                                },
                        remove : onRemove,
                        success : onSuccess
                        });

however there will be a really annoying behaviour that, when users select another file when the previous selected file uploading is still in progress, then from the front page it looks like the previous selected file is removed, but the fact is the file uploading of previous selected file will still continue, which means the file will get uploaded to your server anyway and you have no chance to trigger the removeUrl to delete the unused file, and of course consuming addtional bandwidth.

what we have done so far to get around this issue is to add a small handling in the onRemove event handler, which will invoking the clearFileByUid to stop the uploading.

function onRemove(e) {
        for(var removedFileId of getFileId(e)){
            //All in progress file should be stopped!
            var fileEntry=$('.k-file-progress[' + kendo.attr('uid') + '="' + removedFileId + '"]', this.wrapper)
            if(fileEntry!=null&&fileEntry.length>0){this.clearFileByUid(removedFileId);}
        }

}
function getFileId(e) {
        return $.map(e.files, function(file) {
                var fileId = file.uid;
                return fileId;
                });
}