title: FormData object, doesn't seem to be uploading my file...
body: <p>Im following <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects#Sending_files_using_a_FormData_object" rel="nofollow">this guide</a> to use aJax to upload an image, mainly so I can have a progress bar. But for some reason the PHP script doesn't seem to receive a file! </p>
  
  <p>Here is my JavaScript:</p>
  
  <pre><code>function submitFile() {
      var form = document.forms.namedItem("imageUpload");
      var formData = new FormData(form);
  
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "php/uploadImage.php", true);
      xhr.onload = function(e) {
          if (xhr.status == 200) {
              console.log("uploaded!");
              doc("imageResponse").innerHTML = xhr.responseText;
          } else {
              console.log("error!");
              doc("imageResponse").innerHTML += "Error " + xhr.status + " occurred when trying to upload your file.&lt;br \/&gt;";
          }
      };
  
      //Progress
      /*
      xhr.upload.onprogress = function(e) {
          if (e.lengthComputable) {
              var currentPercentage = Math.round(e.loaded / e.total * 100);
              document.getElementById("imageUpload").innerHTML = "UPLOAD IMAGE " + currentPercentage + "%";
              document.getElementById("imageUpload").style.backgroundSize = currentPercentage + "% 100%";
          }
      };
      */
  
      //Send data
      xhr.send(formData);
  }
  </code></pre>
  
  <p>And here is my PHP file which receives the file:</p>
  
  <pre><code>&lt;?php
  session_start();
  print_r($_FILES);
  ?&gt;
  </code></pre>
  
  <p>Currently that PHP file is returning an empty Array... it should have my file!</p>
  
  <blockquote>
    <p>Array ( )</p>
  </blockquote>