Mark Nijboer Mark Nijboer - 1 year ago 87
Javascript Question

AJAX image upload with FormData doesn't show image on server side

I am making a image upload system that simply uploads the image as soon as it is attached to the

element. However, I am having difficulties in getting the image to the server side.

Test case


<a class="button" data-action="upload-images">Upload Image</a>
<div style="display:none;">
<form method="POST" enctype="multipart/form-data" class="image-upload-form">
<input type="file" name="image" data-caller="upload-images" accept="image/*" />
<input type="hidden" name="object_id" value="1"/>


// Let a custom button open the file selection frame
jQuery( document ).on( "click", "[data-action='upload-images']", function() {
jQuery( this ).parent().find( "[data-caller='upload-images']" ).click();

// Catch a file upload
jQuery( document ).on( "change", "[data-caller='upload-images']", function() {

url: "ajax/image-upload",
type: "POST",
data: new FormData( this.parentNode ),
contentType: false,
processData: false,
success: function( data ) {
console.log( data );


PHP: ajax/image-upload



Executing this code gives the following output in the console:

array(1) {
string(1) "1"
} // No image?

The request payload is:

Content-Disposition: form-data; name="image"; filename="TrueTone.png"
Content-Type: image/png

Content-Disposition: form-data; name="object_id"


What I have tried

I really can't find a way to get the uploaded image to the server side. So far I have seen a couple of tutorials that use the same method but catch the file upload
and use
to cancel the actual submission.
I completely rewrote my code with a submit button to copy this way of catching the image, without any success.

The request payload indicates that the file is being uploaded but it is not visible on the server side. I hope you can help me.

Answer Source

Use print_r($_FILES) to check if any file was sent and not $_POST.