Geek asks and answers

How to restrict Kendo UI Web Upload to allow only one download?

I am currently using Kendo UI to upload files to a database using MVC3 and Razor and Entity Framework. It works fine for me in several areas of my site, except when I need to limit it to allow only singular downloads. I have a multiple set to false, which needs to disable multiple selections, but the user is still allowed to press the select button any number of times to add files, violating the requirements for this field in the database.

I tried some suggestions that I thought I found on their site, but they relate to the currently selected items sent in the current request, and not to the entire list of downloads (see the figure 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

+7
5

( , ), ... singleFile , .

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

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

, , .
"", , , .

( Kendo Razor, , .Kendo() .kendoUpload

, javascript ( @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>
+7

, :

var dropzone = $(".k-dropzone").addClass("hide");

singleFile() , , , , :

.hide {
  display: none; }

css -.

0

multiple kendo upload false;
  @(Html.Kendo().Upload().Multiple(false))

0

, , , .

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

, , , , , , , , removeUrl, , , .

, , , onRemove, clearFileByUid, .

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;
                });
}
0

More articles:


All Articles