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