Open Image Previews in External Dialog in the Upload

Environment

Product	Progress® Kendo UI® Upload for jQuery
Product	Progress® Kendo UI® Window for jQuery

Description

I added image previews before uploading in Kendo UI for jQuery Upload. Now, I want to zoom or open the images in the image preview in external dialog when an image is clicked. How can I achieve that?

Solution

1. Add a Kendo Window on the page that is initially hidden.
   
2. When the preview icon is clicked, you can open the Window and change its content with the clicked image.
3. You can also set styles, thus the image to always be 100% of the width and height of the Window when it is resized.

The following example demonstrates the full implementation of the described approach:

EditPreviewOpen In Dojo

 <div id="dialog"></div>     
      <input type="file" id="files">

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


          $("#dialog").kendoWindow({
            title: "Kendo Window Component",         
            visible:false
          });

        });

        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-icon-wrapper")
                .replaceWith(preview);
            };

            reader.readAsDataURL(raw);

            setTimeout(function(){              
              $('.image-preview').on('click', function(){               
                $("#dialog").data('kendoWindow').content('<img src="'+ this.src+'" />').open()
              })
            }, 100)

          }
        }
      </script>
      <style>
        .image-preview {
          position: relative;
          vertical-align: top;
          height: 45px;
        }

        .k-window-content img{
          height: 100%;
          width: 100%;
        }
      </style>