title: How to preview of the multiple images that being upload before post to server using kendo upload control
body: <p>It works fine for a single image whenever multiple images are uploaded then all the image previews are overwritten by the last image preview Here is My Code and  I am using Kendo Upload control.</p>
  
  <pre><code> @(Html.Kendo().Upload()
                  .Name("files").
                  TemplateId("fileTemplate")
                  .Async(a =&gt; a
                      .Save("Save", "Upload")
                      .Remove("Remove", "Upload")
                      .AutoUpload(false)).Events(events =&gt; events.Select("onSelect")))
  
  
      &lt;script id="fileTemplate" type="text/x-kendo-template"&gt;
          &lt;span class='k-progress'&gt;&lt;/span&gt;
          &lt;div class='file-wrapper'&gt;
              &lt;img class='file-icon' /&gt; &lt;!-- here im trying to bind the image --&gt;
              &lt;h4 class='file-heading file-name-heading'&gt;Name: #=name#&lt;/h4&gt;
              &lt;h4 class='file-heading file-size-heading'&gt;Size: #=size# bytes&lt;/h4&gt;
                  &lt;button type='button' class='k-upload-action'&gt;&lt;/button&gt;
              &lt;/div&gt;
          &lt;/script&gt;
  
  &lt;script&gt;
      function onSelect(e) {
          $.each(e.files, function (index, value) {
                      readMultipleFiles(value);
          });
      }
  
      function readMultipleFiles(file) {
          var reader = new FileReader();
          reader.onload = function (e) {
              // bind the file content
              $("img").attr({ src: e.target.result });
          }
          reader.readAsDataURL(file.rawFile);
      }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
      .file-icon {
          display: inline-block;
          float: left;
          width: 48px;
          height: 48px;
          margin-left: 10px;
          margin-top: 13.5px;
      }
  
      #example .file-heading {
          font-family: Arial;
          font-size: 1.1em;
          display: inline-block;
          float: left;
          width: 450px;
          margin: 0 0 0 20px;
          height: 25px;
          -ms-text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
      }
  
      #example .file-name-heading {
          font-weight: bold;
      }
  
      #example .file-size-heading {
          font-weight: normal;
          font-style: italic;
      }
  
      li.k-file .file-wrapper .k-upload-action {
          position: absolute;
          top: 0;
          right: 0;
      }
  
      li.k-file div.file-wrapper {
          position: relative;
          height: 75px;
      }
  &lt;/style&gt;
  </code></pre>