title: Cannot read property 'target' of undefined  when trying to access <input> files
body: <p>I'm trying to change file upload image to select or click on image on the same page in this canvas related script.</p>
  
  <pre><code>function aFileIsLoaded(e1)
  {
          var filename = e1.target.files[0];
          var fr = new FileReader();
  fr.onload = function(e2)
  {
        backgroundimage = new Image();
        backgroundimage.src=e2.target.result;
       var context = document.getElementById('myCanvas').getContext('2d');
       context.canvas.width = backgroundimage.width;
       context.canvas.height = backgroundimage.height;
       context.drawImage(backgroundimage, 0, 0, backgroundimage.width, backgroundimage.height);
  
  
  };
      fr.readAsDataURL(filename);
  }
  
  
  
  window.onload=function(){
  var s = document.getElementById("fontsize");
  s.value="48";
  document.getElementById('loadpicture').addEventListener('change', aFileIsLoaded, false);
  backgroundimagemode=NONE;
  carpeInit();
  update();
  }
  </code></pre>
  
  <p>before, this images were called like this,  and files were selected from desktop</p>
  
  <pre><code>&lt;input type="file" name="back" id="loadpicture" src="myimage.png" &gt;
  </code></pre>
  
  <p>and now I'm trying to load an image in the same page with this:</p>
  
  <pre><code>&lt;img src="myimage.png" name="back" id="loadpicture" onclick="aFileIsLoaded()"&gt;
  </code></pre>
  
  <p>but I'm getting this error:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'target' of undefined 
  </code></pre>
  
  <p>any help will be appreciated</p>