title: File Upload with PHP and jQuery
body: <p>I'm making a very simple file upload web application, i tested it with a simple POST request directly to the PHP page and it works fine but not with Ajax.
  I'm thinking it's related to the way i'm using FormData() but i did google and experiment with other solutions using the FormData but none of them worked so i'm not entirely sure where the problem lies.
  I just get this type of error in the console :</p>
  <pre><code>Object { readyState: 0, getResponseHeader: getResponseHeader(key), getAllResponseHeaders: getAllResponseHeaders(), setRequestHeader: setRequestHeader(name, value), overrideMimeType: overrideMimeType(type), statusCode: statusCode(map), abort: abort(statusText), state: state(), always: always(), catch: catch(fn), … }
  </code></pre>
  <p>HTML :</p>
  <pre><code>     &lt;form id=&quot;upForm&quot; enctype=&quot;multipart/form-data&quot;&gt;
          &lt;input hidden name=&quot;MAX_FILE_SIZE&quot; value=&quot;3000000&quot;&gt;
          &lt;input id = &quot;file&quot; type=&quot;file&quot; name=&quot;file&quot;&gt; &lt;br&gt;
          &lt;input type=&quot;submit&quot; value=&quot;upload&quot;&gt;
      &lt;/form&gt;
  </code></pre>
  <p>JS script :</p>
  <pre><code>$(document).ready(function (e) {
      $(&quot;#upForm&quot;).on('submit', function (e) {
          $.ajax(
              {
                  type: 'POST',
                  dataType: 'JSON',
                  url: '/data/controls.php',
                  processData: false,
                  contentType: false,
                  cache: false,
                  data: new FormData(this),
                  // beforeSend: // TO-DO
                  success: function (response) {
                      // file uploaded
                      console.log(response);
                  },
                  error: function (response) {
                      console.log(response)
                  }
              }
          )
      }
      )
  }
  )
  </code></pre>
  <p>controls.php :</p>
  <pre><code>$uploadDir = &quot;../upload/&quot;;
  $response = array(
      'status' =&gt; 0,
      'message' =&gt; 'Oops!'
  );
  
  if ($_SERVER[&quot;REQUEST_METHOD&quot;] == &quot;POST&quot;){
      //test file extension
      //test file size
      if ($_FILES['file']['size'] &gt; 3000000){
          $response['status'] = 0;
          $response['message'] = 'File size too big!';
  
      } else {
          $allowedTypes = array('jpg', 'png', 'jpeg', 'gif');
          $fileName = basename($_FILES['file']['name']);
          $filePath = $uploadDir . $fileName;
          $fileType = pathinfo($filePath, PATHINFO_EXTENSION);
  
          if (in_array($fileType, $allowedTypes)){
              if(move_uploaded_file($_FILES['file']['tmp_name'], $filePath)){
                  $response['status'] = 1;
                  $response['message'] = 'Something went wrong :(';
              }
          } else {
              $response['status'] = 2;
              $response['message'] = 'File format not allowed!';
          }
      }
      if ($response['status'] = 1){
          $PDOinst= DBconnect::getInstance();
          $PDO = $PDOinst-&gt;getConnection();
          $sqlString = &quot;INSERT INTO fileUpload values (NULL, :fname, :size, :upDate)&quot;;
          $query = $PDO-&gt;prepare($sqlString);
          $paramArray = array(
              'fname' =&gt; $_FILES['file']['name'],
              'size' =&gt; $_FILES['file']['size'],
              'upDate' =&gt; date(&quot;d-m-Y (G:i)&quot;)
          );
          $query-&gt;execute($paramArray);
          $response['status'] = 3;
          $response['message'] = 'File uploaded successfully!';
      }
      echo json_encode($response);
  }
  
  echo json_encode($response);
  </code></pre>