contentType: false and processData: false make POST empty in PHP

Question

I am trying to upload a file to my server using AJAX. The AJAX call works fine and my PHP returns correctly but when I add contentType: false and processData: false it no longer does.

var formData = new FormData();
formData.append('image', input.files[0]);

$.ajax({
    url: "php/API.php",
    data: {action: "changeProfilePicture", profilePicture: formData},
    type: "POST",
    contentType: false, // if i remove this
    processData: false, // and this, and my form data in `data:` then POST is not empty
    success: function(resp) {
        console.log(resp)
    }
});

// inside of php/API.php
<?php
    // post is empty
    print_r($_POST);

    if(isset($_POST) && !empty($_POST)) {
        ...
    }
?>

Answer 1

When sending multipart/formdata with jQuery.ajax, the request data should be an instance of FormData. e.g.

var formData = new FormData();
formData.append('image', input.files[0]);
formData.append('action', 'changeProfilePicture');
$.ajax({
    url: "php/API.php",
    data: formData,
    type: "POST",
    contentType: false, 
    processData: false,
    ...