title: javascript click element in iframe
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input">In JavaScript can I make a “click” event fire programmatically for a file input element?</a>  </p>
  </blockquote>
  
  
  
  <p>I wanted to make single click upload so I hide the  <code>&lt;form&gt;</code> inside <code>&lt;iframe&gt;</code> like this (I just typed <code>&lt;iframe&gt;</code> tags around <code>&lt;form&gt;</code> to hide the form):</p>
  
  <pre><code>&lt;iframe id="iframe" name="iframe" height="1" width="1" frameborder="0"&gt;
      &lt;form id="form1" enctype="multipart/form-data" method="post" action="uploaded.php"&gt;
          &lt;div class="row"&gt;
          &lt;label for="file"&gt;Select a File to Upload (up to 20MB)&lt;/label&gt;&lt;br /&gt;
          &lt;input type="file" name="file" id="file" size="40" onchange="uploadFile()" /&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/iframe&gt;
  </code></pre>
  
  <p>Then outside the <code>&lt;iframe&gt;</code> I made a button:</p>
  
  <pre><code>&lt;div align="center"&gt;
      &lt;input type="button" value="Upload" align="center" onclick="browse();" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the browse() javascript is this:</p>
  
  <pre><code>function browse()
  {
      var iframe = document.getElementById.("iframe");
      var input = iframe.contentDocument || iframe.contentWindow.document;
      input.getElementById('file').click();
  }
  </code></pre>
  
  <p>but it not working. The browse file dialog does not open. I'm using Firefox 17.
  Is there a way to click() on <code>&lt;input&gt;</code> inside <code>&lt;iframe&gt;</code> or any other one-click upload solution, but still using my uploadFile() AJAX function?</p>
  
  <pre><code>function uploadFile() {
          var fd = new FormData();
          fd.append("file", document.getElementById('file').files[0]);
          var xhr = new XMLHttpRequest();
          xhr.upload.addEventListener("progress", uploadProgress, false);
          xhr.addEventListener("load", uploadComplete, false);
          xhr.addEventListener("error", uploadFailed, false);
          xhr.addEventListener("abort", uploadCanceled, false);
          xhr.open("POST", "uploaded.php");
          xhr.send(fd);
        }
  </code></pre>
  
  <p>EDIT: this is working when the form is not in iframe, so my question is not wheter or not can I use click() on <code>&lt;input type="file"&gt;</code>. I can and it is working in Firefox 17.
  My question is how to use click() on <code>&lt;input type="file"&gt;</code> inside <code>&lt;iframe&gt;</code>.</p>