New to Kendo UI for jQuery? Download free 30-day trial

Open Image Previews in External Dialog in the Upload


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


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?


  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:

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

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

            title: "Kendo Window Component",         


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


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

        .image-preview {
          position: relative;
          vertical-align: top;
          height: 45px;

        .k-window-content img{
          height: 100%;
          width: 100%;

See Also

In this article