title: I can't preview multiple uploaded images. Not a duplicate
body: <p>I have an uploader function that works, but doesn't preview the image being uploaded like it does the unique file name. I used the window.fileReader function like suggested. </p>
  
  <p>I have dragover and drop addEventListeners, but for some reason I can't get the image data to preview in the "prev-img" div. Any help would be apriciated.</p>
  
  <pre><code>function multiUploader(config){
  
      this.config = config;
      this.items = "";
      this.all = []
      var self = this;
  
      multiUploader.prototype._init = function(){
          if (window.File &amp;&amp; 
              window.FileReader &amp;&amp; 
              window.FileList &amp;&amp; 
              window.Blob) {      
               var inputId = $("#"+this.config.form).find("input[type='file']").eq(0).attr("id");
               document.getElementById(inputId).addEventListener("change", this._read, false);
               document.getElementById(this.config.dragArea).addEventListener("dragover", function(e){ e.stopPropagation(); e.preventDefault(); }, false);
               document.getElementById(this.config.dragArea).addEventListener("drop", this._dropFiles, false);
               document.getElementById(this.config.form).addEventListener("submit", this._submit, false);
          } else
              console.log("Browser supports failed");
      }
  
      multiUploader.prototype._submit = function(e){
          e.stopPropagation(); e.preventDefault();
          self._startUpload();
      }
  
      multiUploader.prototype._preview = function(data){
          this.items = data;
          if(this.items.length &gt; 0){
              var html = "";      
              var uId = "";
              for(var i = 0; i&lt;this.items.length; i++){
                  uId = this.items[i].name._unique();
                  let iMg = this.items[i];  // This is where I thought I'd be able to preview
                  var sampleIcon = '&lt;img src="images/image.png" /&gt;';
                  var errorClass = "";
                  if(typeof this.items[i] != undefined){
                      if(self._validate(this.items[i].type) &lt;= 0) {
                          sampleIcon = '&lt;img src="images/unknown.png" /&gt;';
                          errorClass =" invalid";
                      } 
                      html += '&lt;div class="dfiles'+errorClass+'" rel="'+uId+'"&gt;&lt;div class="prev-img"&gt;&lt;img src='+iMg+' /&gt;&lt;/div&gt;&lt;button onclick="closeprev(this);" type="button" class="close"&gt;×&lt;/button&gt;&lt;h5&gt;'+sampleIcon+this.items[i].name+'&lt;/h5&gt;&lt;div id="'+uId+'" class="progress" style="display:none;"&gt;&lt;img src="images/ajax-loader.gif" /&gt;&lt;/div&gt;&lt;/div&gt;';
                  }
              }
              $("#dragAndDropFiles").append(html);
          }
      }
  
      multiUploader.prototype._read = function(evt){
          if(evt.target.files){
              self._preview(evt.target.files);
              self.all.push(evt.target.files);
  
          } else 
              console.log("Failed file reading");
      }
  
      multiUploader.prototype._validate = function(format){
          var arr = this.config.support.split(",");
          return arr.indexOf(format);
      }
  
      multiUploader.prototype._dropFiles = function(e){
          e.stopPropagation(); e.preventDefault();
          self._preview(e.dataTransfer.files);
          self.all.push(e.dataTransfer.files);
      }
  </code></pre>