Как ограничить загрузку веб-интерфейса Kendo UI, чтобы разрешить только одну загрузку?

Question

В настоящее время я использую Kendo UI для загрузки файлов в БД с использованием MVC3 и Razor и Entity Framework. У меня он отлично работает в нескольких областях моего сайта, за исключением тех случаев, когда мне нужно ограничить его разрешением только отдельной загрузки. У меня есть множественное значение false, которое мне нужно запретить множественный выбор, но пользователю по-прежнему разрешается нажимать кнопку выбора любое количество раз, чтобы добавлять файлы, что нарушает требования к этому полю в БД.

Я попробовал некоторые предложения, которые, как мне показалось, я нашел на их сайте, но они ссылаются на текущие выбранные элементы, отправленные в текущем запросе, а не на весь список загрузок (см. Изображение ниже).

<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

Немного подумав над выходными (и долгими выходными, чтобы расслабиться), меня поразило... Изменение функции singleFile на следующее отключит элемент управления после загрузки файла.

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

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

Answer 2

После того, как мне дали требование предотвратить несколько загрузок, я наткнулся на эту страницу.
"множественный", установленный в ЛОЖЬ, прекрасно работает, если все сделано правильно.

(Хотя вы МОЖЕТЕ использовать синтаксис 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>

Answer 3

Вы должны multiple собственность кендо upload установить значение false;
например @(Html.Kendo().Upload().Multiple(false))

Answer 4

Я знаю, что это действительно старая тема, но я просто хочу опубликовать вопросы, которые мы рассмотрели. Добавление нескольких с асинхронной загрузкой будет работать с простым кодом ниже

$("#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;
                });
}

Answer 5

Также добавляем:

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

функция singleFile() будет скрывать кнопку выбора после завершения загрузки, создавая реальное впечатление, что вы больше не можете загружать, учитывая, что:

.hide {
  display: none; }

определяется в вашем CSS где-то.

Answer 6

Ограничьте, установив несколько значений false в вашем методе подготовки документа скрипта.

      $("#kendoSingleFileInput").kendoUpload({
                multiple: false,
                select: onSelect
  });