Sending images from form with AJAX - php

Question

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.
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.
Below you will find the HTML form, the jQuery AJAX call and the PHP code from the PHP page the AJAX call calls.
HTML FORM
<form action="uploadpost.php" id="postForm" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="postImage">Upload image</label>
<input type="file" id="fileToUpload" name="postImage" class="form-control">
</div>
<div class="form-group">
<label for="description">Write a caption</label>
<textarea name="description" id="postMessage" cols="30" rows="5" class="form-control"></textarea>
</div>
<input type="submit" id="postSubmit" value="Create post" name="upload_image" class="btn btn-primary">
</form>
The AJAX call
<script type="text/javascript">
$(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();
});
});
The PHP code in ajax/postUpload.php
<?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->createPost($file_tmp_name);
if($result){
$uploadCheck['check'] = "success";
}else{
$uploadCheck['check'] = "error";
}
header('Content-Type: application/json');
echo json_encode($uploadCheck);
}
?>
Output from console.log(data) on ajax call return
<pre class='xdebug-var-dump' dir='ltr'>
<b>array</b> <i>(size=0)</i>
<i><font color='#888a85'>empty</font></i>
</pre>
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 createPost().

Answer 1

var formData = new FormData($("#postForm"));
The argument to FormData should be a DOM form object, not a jQuery object.
new FormData($("#postForm")[0])
Setting the content type manually:
contentType: "multipart/form-data",
… will fail to set the boundary data in it. Say:
contentType: false,
… so that jQuery won't try to set it at all and the XHR object will generate it from the FormData object.