title: html5 - javascript - filereader select new image
body: <p>I have probably an easy thing to fix.. So basically I have a simple button which then uses filereader API to make a thumbinal of that chosen image... however after I choose, I cannot change it, not remove it... how do I remove it from there?</p>
  
  <pre class="lang-js prettyprint-override"><code>var f = evt.target.files[0];
  var reader = new FileReader();
  var imgW;
  var imgH;
  
  reader.onload = (function(theFile) {
  return function(e) {
      var lImg = new Image();
          lImg.src = e.target.result;
          lImg.onload = function(){
  
              imgW=lImg.width;
              imgH=lImg.height;
  
              // check which logo is being updated
              if ($(selector).hasClass('rclogo')){
                  rclogo = 'y';
                  rclogoimg = e.target.result; 
                  drawLogo(rclogoimg, 'rc', imgW, imgH); //draws img on canvas
              } ... //removed few conditions
              } else {
                  console.debug("it doesn't have eligible class");
              }
  
              // Render thumbnail.
              var thumbHtml = ['&lt;span&gt;&lt;img class="thumb" src="', e.target.result,
                              '" title="', escape(theFile.name), '"/&gt;&lt;/span&gt;'].join('');
              $(selector).parent().siblings('.previewThumb').html(thumbHtml);
              $(selector).parent().siblings('.previewThumb').removeClass('hidden')
          }
  };
  })(f);
  </code></pre>
  
  <p>Now as I said, the initial choosing of a file works perfectly, however when they want to change the image, it does not work anymore.</p>
  
  <p>You can test it under 'logos'
  Link: <a href="http://vetosports.com/designer/index.html" rel="nofollow">http://vetosports.com/designer/index.html</a></p>
  
  <p>Cheers,
  Tom</p>