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

MattInSD73 picture MattInSD73 · Apr 12, 2013 · Viewed 16.2k times · Source

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

Answer

Tom Stickel picture Tom Stickel · Jul 10, 2013

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>