Объедините два скрипта KendoUI Jquery

Question

Я хотел бы объединить эти два сценария.Но не могу заставить его работать.Я действительно борюсь с JQuery.

Это сценарий, который я использую: https://docs.telerik.com/kendo-ui/controls/editors/upload/how-to/select-additional-metadata

И я хотел бы добавить часть jQuery к этому сценарию, чтобы предварительный просмотр изображения работал: https://docs.telerik.com/kendo-ui/controls/editors/upload/how-to/add-image-preview

        <script>
  $(document).ready(function() {
    $("#files").kendoUpload({
      async: {
        saveUrl: "save",
        removeUrl: "remove",
        autoUpload: false
      },
      multiple: false,
      select: function(e) {
        var fileInfo = e.files[0];
        var wrapper = this.wrapper;

        setTimeout(function(){
          addPreview(fileInfo, wrapper);
        });
      }
    });
  });

  Combine these two--------------------------------------------------------

        <script>
            $(document).ready(function () {
                $("#files").kendoUpload({
                    multiple: true,
                    async: {
                        saveUrl: "save",
                        removeUrl: "remove",
                        autoUpload: false
                    },
                    template: kendo.template($('#fileTemplate').html()),
                    select: onSelect,
                      upload: onUpload
                });
            });

Было бы здорово, если бы кто-то со знанием мог помочь мне!: -)

Большое спасибо!

Answer 1

Черт, ты гений. Предварительный просмотр работает, но сценарий загрузки по какой-то причине больше не работает. Перестала работать кнопка загрузки.

Answer 2

Если вы просто хотите загрузить несколько файлов с предварительным просмотром, сделайте следующее:

$(document).ready(function () {
                    $("#files").kendoUpload({
                        multiple: true,
                        async: {
                            saveUrl: "save",
                            removeUrl: "remove",
                            autoUpload: false
                        },
                        select: onSelect,
                          upload: onUpload
                    });
                });

                function onSelect(e){
                  var upload = this;
                  var files = e.files;

                  var fileInfo = e.files[0];
                  var wrapper = this.wrapper;



                  setTimeout(function(e){
                    addPreview(fileInfo, wrapper);
                  });
                }

              function onUpload(e){
                var upload = this;
                var dropdown = upload.wrapper.find(".k-file[data-uid='" + e.files[0].uid +"'] select").data("kendoDropDownList");

                e.data = {
                    uploader: dropdown.value()
                };
              }

              function addPreview(file, wrapper) {
                var raw = file.rawFile;
                var reader  = new FileReader();

                if (raw) {
                  reader.onloadend = function () {
                    var preview = $("<img class='image-preview'>").attr("src", this.result);

                    wrapper.find(".k-file[data-uid='" + file.uid + "'] .k-file-extension-wrapper")
                      .replaceWith(preview);
                  };

                  reader.readAsDataURL(raw);
                }
              }