Search code examples
javascriptc#asp.net-mvckendo-uikendo-asp.net-mvc

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


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

File list - Allowed up upload multiple files, singularly


Solution

  • 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();
    }