title: Javascript upload eventlistener requires two clicks to fire
body: <p>I am trying this code in phpbb but for some reason on the first click it fires the error eventlistener, but then when I click submit file again it starts to show the upload progress. Why?</p>
  
  <p>overall_header.html :</p>
  
  <pre><code>&lt;script&gt;
  /* Script written by Adam Khoury @ DevelopPHP.com */ /* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */ 
  function _(el){
      return document.getElementById(el);
  }
  
  function uploadFile(){
      var file = _("file1").files[0];
      var formdata = new FormData();
      //alert(file.name+" | "+file.size+" | "+file.type);
      formdata.append("file1", file);
  var ajax = new XMLHttpRequest();
  ajax.addEventListener("loadstart", loadStart, false);  
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.addEventListener("abort", abortHandler, false);
  ajax.open("POST", "root/file_upload_parser.php"); ajax.send(formdata);
  //alert(ajax);
  }
  
  function loadStart(event){
  _("status").innerHTML = event.target.responseText; _("progressBar").value = "fuck";
  }
  
  
  function progressHandler(event){
  _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
  var percent = (event.loaded / event.total) * 100; _("progressBar").value = Math.round(percent); _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
  }
  
  function completeHandler(event){
  _("status").innerHTML = event.target.responseText; _("progressBar").value = 0;
  }
  
  function errorHandler(event){
  _("status").innerHTML = "Upload Failed";
  }
  
  function abortHandler(event){
  _("status").innerHTML = "Upload Aborted";
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>posting_attach_body.html</p>
  
  <pre><code>    &lt;div class="inner"&gt;&lt;span class="corners-top"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;
  
  &lt;p&gt;{L_ADD_ATTACHMENT_EXPLAIN}&lt;/p&gt;
  
  &lt;fieldset class="fields2"&gt;
  &lt;dl&gt;
      &lt;dt&gt;&lt;label for="fileupload"&gt;{L_FILENAME}:&lt;/label&gt;&lt;/dt&gt;
      &lt;dd&gt;
          &lt;input type="file" name="file1" id="file1" maxlength="{FILESIZE}" value="" class="inputbox autowidth" /&gt; 
          &lt;input type="submit" name="add_file" value="{L_ADD_FILE}" class="button2" onclick="uploadFile()" /&gt;
      &lt;/dd&gt;
  &lt;/dl&gt;
  &lt;dl&gt;
  &lt;dt&gt;&lt;label for="urlupload"&gt;{L_URLUPLOAD}&lt;/label&gt;&lt;/dt&gt;
  &lt;dd&gt;
      &lt;input type="url" name="urlupload" id="urlupload" maxlength="{FILESIZE}" value="" class="inputbox autowidth" /&gt; 
      &lt;input type="submit" name="add_file" value="{L_ADD_FILE}" class="button2" onclick="upload = true;" /&gt;
  &lt;/dd&gt;
  </code></pre>
  
  <p>
      
    </p></p>