title: HTML5 + jQuery AJAX upload - No file sent to server
body: <p>I'm trying to implement a HTML5 ajax file upload with the help of HTML5's File API. It is based on Afzaal Ahmad Zeeshan's answer to <a href="https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery">this</a> question.</p>
  
  <p>My main aim would be to be able to let users upload <code>.xls</code> and <code>.xlsx</code> spreadsheet for later use.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form class="form-uploadXLS" method="post" action="php/uploadXLS.php" enctype="multipart/form-data"&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;input type="file" name="xls" class="xls" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;input type="button" value="Upload" class="btn-uploadXLS" /&gt;
  &lt;/form&gt;
  &lt;progress&gt;&lt;/progress&gt;
  </code></pre>
  
  <p>And here are the jQuery event handlers, just like in the above mentioned answer:</p>
  
  <p>File input <code>onChange</code> event:</p>
  
  <pre><code>$('.xls').on('change', function () {
      var file = this.files[0];
      var fileName = file.name;
      var fileType = file.type;
      var fileSize = file.size;
  
      console.log("file name: " + fileName + ", type: " + fileType + ", size: " + fileSize);
  });
  </code></pre>
  
  <p>This works correctly, the file's name, type and size gets logged to the server.</p>
  
  <p>Upload button's <code>onClick</code> event:</p>
  
  <pre><code>$('.btn-uploadXLS').on('click', function (event) {
      event.preventDefault();
      console.log("Upload button clicked");
      var formData = new FormData($('.form-uploadXLS')[0]);
  
      $.ajax({
          url: 'php/uploadXLS.php', //Server script to process data
          type: 'POST',
          xhr: function () { // Custom XMLHttpRequest
              var myXhr = $.ajaxSettings.xhr();
              if (myXhr.upload) { // Check if upload property exists
                  myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // For handling the progress of the upload
              }
              return myXhr;
          },
          //Ajax events
          beforeSend: function (stuff) {
              console.log("BeforeSend");
              console.log(stuff);
          },
          success: function (data) {
              console.log("Success!");
              console.log(data);
          },
          error: function (error) {
              console.log("Error!");
              console.log(error);
          },
          // Form data
          data: formData,
          //Options to tell jQuery not to process data or worry about content-type.
          cache: false,
          contentType: false,
          processData: false
      });
  });
  </code></pre>
  
  <p>On server side, I'm using this PHP code to check if the file has been sent to the server</p>
  
  <pre><code>if(!empty($_FILES['xls'])) {
      echo '&lt;pre&gt;',print_r($_FILES,1),'&lt;/pre&gt;';
  }
  else {
      die('no $_FILES variable');
  }
  </code></pre>
  
  <p>And here's the result of print_r:</p>
  
  <pre><code>Array
  (
  [xls] =&gt; Array
  (
  [name] =&gt;
  [type] =&gt;
  [tmp_name] =&gt;
  [error] =&gt; 4
  [size] =&gt; 0
  )
  
  )
  </code></pre>
  
  <p>According to <a href="http://hu1.php.net/manual/en/features.file-upload.errors.php" rel="nofollow noreferrer">the documentation</a>, error code <code>4</code> means: <code>UPLOAD_ERR_NO_FILE Value: 4; No file was uploaded.</code> </p>
  
  <p>What am I doing wrong?</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>If I disable the click event listener and submit the form as normal, the file gets uploaded without problems.</p>
  
  <p>I've noticed, that the <code>formData</code> variable doesn't have any value. This is the value of <code>formData</code> after it's been set: <code>FormData { append=append()}</code></p>