title: Sending images from form with AJAX
body: <p>I've been working on a form where you upload an image and a comment. I got it working in PHP, but now I'd like to do it in AJAX. The reason I'd like to do it in AJAX is because the user has to type all of their text again when the upload fails (due to conditions like: fields can't be empty or the aspect ratio of the image is off). However whatever I do, I fail to do it in AJAX. </p>
  
  <p>I've tried to do it in FormData, with $.post and with $.ajax. I've also looked up a lot of guides, and other posts about this, but nothing seems to work for me. </p>
  
  <p>Below you will find the HTML form, the jQuery AJAX call and the PHP code from the PHP page the AJAX call calls.</p>
  
  <p>HTML FORM</p>
  
  <pre><code>&lt;form action="uploadpost.php" id="postForm" method="POST" enctype="multipart/form-data"&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="postImage"&gt;Upload image&lt;/label&gt;
              &lt;input type="file" id="fileToUpload" name="postImage" class="form-control"&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label for="description"&gt;Write a caption&lt;/label&gt;
              &lt;textarea name="description" id="postMessage" cols="30" rows="5" class="form-control"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
          &lt;input type="submit" id="postSubmit" value="Create post" name="upload_image" class="btn btn-primary"&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>The AJAX call</p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
  $(document).ready(function(){
  
      $("#postSubmit").on("click", function(e){
          var formData = new FormData($("#postForm"));
          //var message = $("#postMessage").val();
  
          $.ajax({
              url: "ajax/postUpload.php", 
              type: "POST",             
              data: formData,             
              contentType: "multipart/form-data",       
              cache: false,             
              processData:false,        
              success: function(data)  
              {
                  console.log(data);
              }
          });
          e.preventDefault();
      });
  });
  </code></pre>
  
  <p></p>
  
  <p>The PHP code in ajax/postUpload.php</p>
  
  <pre><code>&lt;?php
  include_once("../classes/Post.class.php");
  $post = new Post();
  
  var_dump($_FILES);
  if(!empty($_POST)){
  
  $file_tmp_name = $_FILES['postImage']['tmp_name'];
  
  
  $result = $post-&gt;createPost($file_tmp_name);
  if($result){
      $uploadCheck['check'] = "success";
  }else{
      $uploadCheck['check'] = "error";    
  }
  header('Content-Type: application/json');
  echo json_encode($uploadCheck);
  }
  
  ?&gt;
  </code></pre>
  
  <p>Output from <code>console.log(data)</code> on ajax call return</p>
  
  <pre><code>&lt;pre class='xdebug-var-dump' dir='ltr'&gt;
  &lt;b&gt;array&lt;/b&gt; &lt;i&gt;(size=0)&lt;/i&gt;
  &lt;i&gt;&lt;font color='#888a85'&gt;empty&lt;/font&gt;&lt;/i&gt;
  &lt;/pre&gt;
  </code></pre>
  
  <p>The problem is that I can't send the image nor the message over to that PHP page, which doesn't allow me to do <code>createPost()</code>.</p>