title: Edit image on browse
body: <p>I have this code where when I click on the edit icon it adds a new image below the existing image. I want the new image to replace the existing image. </p>
  
  <p>I know i have to use index attribute in div, but need help in doing so. 
  Adding the code here: </p>
  
  <pre><code>addImage = function(event){
  var parent = event.currentTarget.parentNode.parentNode.parentNode,
              index = parseInt(parent.getAttribute('index')),
              script,
              clone = imageView.cloneNode(true),
              files = event.target.files;
          for (var i = 0,
                  f; f = files[i]; i++) {
  
              // Only process image files.
              if (!f.type.match('image.*')) {
                  continue;
              }
  
              var reader = new FileReader();
  
              // Closure to capture the file information.
              var imageBot = clone.querySelector('[name=imageBot]');
              if (imageBot)
                  imageBot.innerHTML = '&lt;svg style="position:absolute; top:45%;left:50%" class="spinner" width="25px" height="25px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"&gt;' + '&lt;circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"&gt;&lt;/circle&gt;' + '&lt;/svg&gt;';
              clone.querySelector('.welcome-pane-user-content').setAttribute('data-type', 'image');
  
              setViewByIndex(index, clone.children[0]);
              document.querySelector('[name=insertOverlayView]').classList.add('hide');
              reader.readAsDataURL(f);
          }
  };
  </code></pre>
  
  <p>This is in plain javascript. No Jquery please.</p>