title: Chrome: trigger click event with jQuery (it works with Firefox)
body: <p>The idea is: you have a file field, which is hidden, and an image. You use the image to show the select file dialog. Then I display the image in the canvas. </p>
  
  <pre><code>&lt;input id="ytfile-select" type="hidden" value="" name="Foto[image]" /&gt;
  &lt;input style="display:none" id="file-select" accept="image/*" 
  name="Foto[image]" type="file" /&gt;
  &lt;img id="upload-image" src="/images/design/upload-image.png" 
  alt="upload-image-button" /&gt;        
  &lt;canvas id="canvas"&gt;  
      Sorry, your browser doesn't support the &amp;lt;canvas&amp;gt; element.  
  &lt;/canvas&gt;  
  
  $('#upload-image').click(function(){
    $('#file-select').click();
  });
  
  
  $('#file-select').bind('change',function(){
    var fileList = this.files;  
    var img = document.createElement("img");  
    img.classList.add("obj");  
    img.src = window.URL.createObjectURL(fileList[0]);  
    var ctx = document.getElementById('canvas').getContext("2d");
    ctx.drawImage(img,0,0);
  });
  </code></pre>
  
  <p>On Firefox 10, <code>ctx.drawImage(img,0,0);</code> <em>only works when</em> I have the Firebug debugger nad breakpoint on that line. Without the breakpoint, it doesn't work. I checked it on another clean profile.</p>
  
  <p>On Chrome, <code>$('#file-select').click();</code> doesn't open the file dialog.</p>
  
  <hr>
  
  <p><strong>Edit</strong>: this question has been already answered. However, I have no idea what the issue with Firefox is. Any ideas?</p>
  
  <p>I used these websites to create this code:</p>
  
  <ul>
  <li><a href="https://developer.mozilla.org/en/using_files_from_web_applications" rel="nofollow">https://developer.mozilla.org/en/using_files_from_web_applications</a></li>
  <li><a href="http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/" rel="nofollow">http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/</a></li>
  </ul>
  
  <p><strong>Edit 2</strong>:
  I resolved the issue with the Firefox by doing this:
  Behind the line <code>var fileList = this.files;</code>, I put:</p>
  
  <pre><code>reader = new FileReader();
  reader.onload = function (event) {
      $('#display').append('&lt;img src ="' + event.target.result + '"&gt;');
  };
  reader.readAsDataURL(fileList[0]);
  </code></pre>