title: Ajax file upload - Error on server side
body: <p>I am trying to implement ajax file upload via the HTML5 File API. It's 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>I've basically copied the entire code that he wrote, but can't get it to work.</p>
  
  <p>The main aim here is to be able to upload <code>.xls</code> and <code>.xlsx</code> files to the server to work with them later with <code>PHPExcel</code>.</p>
  
  <p>Here's my 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>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><strong>Edit starts here:</strong></p>
  
  <p>And finally here's my PHP code that prints out the $_FILES array:</p>
  
  <pre><code>if(!empty($_FILES['xls'])) {
      echo '&lt;pre&gt;',print_r($_FILES,1),'&lt;/pre&gt;';
  }
  else {
      die('POST ÜRES');
  }
  </code></pre>
  
  <p>And here's the result:</p>
  
  <pre><code>Array
  (
      [xls] =&gt; Array
          (
              [name] =&gt; 
              [type] =&gt; 
              [tmp_name] =&gt; 
              [error] =&gt; 4
              [size] =&gt; 0
          )
  
  )
  </code></pre>
  
  <p>For some reason I can't access the error messages, it only contains the number 4.</p>
  
  <p>What am I doing wrong?</p>