title: The old file get remove from jQuery fileupload control
body: <p>Suppose I am uploading one file from as shown in snippet code and then after again I am uploading the two files from same upload click control in that case the old file get loose from file upload control and newly uploaded file get display on hover of upload control</p>
  
  <p>Steps to reproduce :</p>
  
  <p>1) When I select one file on click of Select Attachment button the view looks as below image</p>
  
  <p><a href="https://i.stack.imgur.com/0S1je.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0S1je.png" alt="enter image description here"></a></p>
  
  <p>2) Now again when I select two image on click of Select Attachment button the old image/file gets remove and the new files get display. please review below screenshot</p>
  
  <p><a href="https://i.stack.imgur.com/Hgi35.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hgi35.png" alt="enter image description here"></a></p>
  
  <p>3) On click of delete also the Old file name remain on Upload control(Can see on hover effect)</p>
  
  <p>I had taken the code from <a href="https://www.codeproject.com/Articles/1208892/Lightweight-Multiple-File-Upload-with-Thumbnail-Pr" rel="nofollow noreferrer">link</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//I added event handler for the file upload control to access the files properties.
  document.addEventListener("DOMContentLoaded", init, false);
  
  //To save an array of attachments 
  var AttachmentArray = [];
  
  //counter for attachment array
  var arrCounter = 0;
  
  //to make sure the error message for number of files will be shown only one time.
  var filesCounterAlertStatus = false;
  
  //un ordered list to keep attachments thumbnails
  var ul = document.createElement('ul');
  ul.className = ("thumb-Images");
  ul.id = "imgList";
  
  function init() {
      //add javascript handlers for the file upload event
      document.querySelector('#files').addEventListener('change', handleFileSelect, false);
  }
  
  //the handler for file upload event
  function handleFileSelect(e) {
      //to make sure the user select file/files
      if (!e.target.files) return;
  
      //To obtaine a File reference
      var files = e.target.files;
  
      // Loop through the FileList and then to render image files as thumbnails.
      for (var i = 0, f; f = files[i]; i++) {
  
          //instantiate a FileReader object to read its contents into memory
          var fileReader = new FileReader();
  
          // Closure to capture the file information and apply validation.
          fileReader.onload = (function (readerEvt) {
              return function (e) {
  
                  //Apply the validation rules for attachments upload
                  ApplyFileValidationRules(readerEvt)
  
                  //Render attachments thumbnails.
                  RenderThumbnail(e, readerEvt);
  
                  //Fill the array of attachment
                  FillAttachmentArray(e, readerEvt)
              };
          })(f);
  
          // Read in the image file as a data URL.
          // readAsDataURL: The result property will contain the file/blob's data encoded as a data URL.
          // More info about Data URI scheme https://en.wikipedia.org/wiki/Data_URI_scheme
          fileReader.readAsDataURL(f);
      }
      document.getElementById('files').addEventListener('change', handleFileSelect, false);
  }
  
  //To remove attachment once user click on x button
  jQuery(function ($) {
      $('div').on('click', '.img-wrap .close', function () {
          var id = $(this).closest('.img-wrap').find('img').data('id');
  
          //to remove the deleted item from array
          var elementPos = AttachmentArray.map(function (x) { return x.FileName; }).indexOf(id);
          if (elementPos !== -1) {
              AttachmentArray.splice(elementPos, 1);
          }
  
          //to remove image tag
          $(this).parent().find('img').not().remove();
  
          //to remove div tag that contain the image
          $(this).parent().find('div').not().remove();
  
          //to remove div tag that contain caption name
          $(this).parent().parent().find('div').not().remove();
  
          //to remove li tag
          var lis = document.querySelectorAll('#imgList li');
          for (var i = 0; li = lis[i]; i++) {
              if (li.innerHTML == "") {
                  li.parentNode.removeChild(li);
              }
          }
  
      });
  }
  )
  
  //Apply the validation rules for attachments upload
  function ApplyFileValidationRules(readerEvt)
  {
      //To check file type according to upload conditions
      if (CheckFileType(readerEvt.type) == false) {
          alert("The file (" + readerEvt.name + ") does not match the upload conditions, You can only upload jpg/png/gif files");
          e.preventDefault();
          return;
      }
  
      //To check file Size according to upload conditions
      if (CheckFileSize(readerEvt.size) == false) {
          alert("The file (" + readerEvt.name + ") does not match the upload conditions, The maximum file size for uploads should not exceed 300 KB");
          e.preventDefault();
          return;
      }
  
      //To check files count according to upload conditions
      if (CheckFilesCount(AttachmentArray) == false) {
          if (!filesCounterAlertStatus) {
              filesCounterAlertStatus = true;
              alert("You have added more than 10 files. According to upload conditions you can upload 10 files maximum");
          }
          e.preventDefault();
          return;
      }
  }
  
  //To check file type according to upload conditions
  function CheckFileType(fileType) {
      if (fileType == "image/jpeg") {
          return true;
      }
      else if (fileType == "image/png") {
          return true;
      }
      else if (fileType == "image/gif") {
          return true;
      }
      else {
          return false;
      }
      return true;
  }
  
  //To check file Size according to upload conditions
  function CheckFileSize(fileSize) {
      if (fileSize &lt; 300000) {
          return true;
      }
      else {
          return false;
      }
      return true;
  }
  
  //To check files count according to upload conditions
  function CheckFilesCount(AttachmentArray) {
      //Since AttachmentArray.length return the next available index in the array, 
      //I have used the loop to get the real length
      var len = 0;
      for (var i = 0; i &lt; AttachmentArray.length; i++) {
          if (AttachmentArray[i] !== undefined) {
              len++;
          }
      }
      //To check the length does not exceed 10 files maximum
      if (len &gt; 9) {
          return false;
      }
      else
      {
          return true;
      }
  }
  
  //Render attachments thumbnails.
  function RenderThumbnail(e, readerEvt)
  {
      var li = document.createElement('li');
      ul.appendChild(li);
      li.innerHTML = ['&lt;div class="img-wrap"&gt; &lt;span class="close"&gt;&amp;times;&lt;/span&gt;' +
          '&lt;img class="thumb" style="display:none;" src="', e.target.result, '" title="', escape(readerEvt.name), '" data-id="',
          readerEvt.name, '"/&gt;' + '&lt;/div&gt;'].join('');
  
      var div = document.createElement('div');
      div.className = "FileNameCaptionStyle";
      li.appendChild(div);
      div.innerHTML = [readerEvt.name].join('');
      document.getElementById('Filelist').insertBefore(ul, null);
  }
  
  //Fill the array of attachment
  function FillAttachmentArray(e, readerEvt)
  {
      AttachmentArray[arrCounter] =
      {
          AttachmentType: 1,
          ObjectType: 1,
          FileName: readerEvt.name,
          FileDescription: "Attachment",
          NoteText: "",
          MimeType: readerEvt.type,
          Content: e.target.result.split("base64,")[1],
          FileSizeInBytes: readerEvt.size,
      };
      arrCounter = arrCounter + 1;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*Copied from bootstrap to handle input file multiple*/
  
  .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
  }
  
  /*Also */
  
  .btn-success {
    border: 1px solid #c5dbec;
    background: #D0E5F5;
    font-weight: bold;
    color: #2e6e9e;
  }
  
  /* This is copied from https://github.com/blueimp/jQuery-File-Upload/blob/master/css/jquery.fileupload.css */
  
  .fileinput-button {
    position: relative;
    overflow: hidden;
  }
  
  .fileinput-button input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    -ms-filter: 'alpha(opacity=0)';
    font-size: 200px;
    direction: ltr;
    cursor: pointer;
  }
  
  .thumb {
    height: 80px;
    width: 100px;
    border: 1px solid #000;
  }
  
  ul.thumb-Images li {
    width: 120px;
    float: left;
    display: inline-block;
    vertical-align: top;
    height: 120px;
  }
  
  .img-wrap {
    position: relative;
    display: inline-block;
    font-size: 0;
  }
  
  .img-wrap .close {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 100;
    background-color: #D0E5F5;
    padding: 5px 2px 2px;
    color: #000;
    font-weight: bolder;
    cursor: pointer;
    opacity: .5;
    font-size: 23px;
    line-height: 10px;
    border-radius: 50%;
  }
  
  .img-wrap:hover .close {
    opacity: 1;
    background-color: #ff0000;
  }
  
  .FileNameCaptionStyle {
    font-size: 12px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;span class="btn btn-success fileinput-button"&gt;
    &lt;span&gt;Select Attachment&lt;/span&gt;
    &lt;input type="file" name="files[]" id="files" multiple accept="image/jpeg, image/png, image/gif,"&gt;&lt;br /&gt;
  &lt;/span&gt;
  &lt;output id="Filelist"&gt;&lt;/output&gt;</code></pre>
  </div>
  </div>
  </p>