ajax beforeSend не работает при отправке formData

У меня есть div

который показывает изображение загрузчика при отправке ajax-запросов

Я добавил div в атрибуте beforeSend ajax. Проблема в том, что если я отправляю данные serialize (), то beforeSend работает, но не работает при отправке formData

Работает

$.ajax({
url: 'centre-basic-process.php',
type: 'post',
data: $('#centreform').serialize(),
beforeSend: function() {
$('.displayLoader').show();
},
success: function(response) {
console.log(response);
$('#centreformupload').show();
$('#centreform').hide();
$('html, body').animate({
scrollTop: 0
}, 0);
}
});

Не работает

$.ajax({
url: 'centre-upload-process.php',
type: 'POST',
data: formData,
async: false,
beforeSend: function() {
$('.displayLoader').show();
},
success: function(response) {
alert("You have succesfully submitted the form. Please complete the payment method");
document.location.href = "dashboard.php";
},
cache: false,
contentType: false,
processData: false
});

Я даже пытался ajaxStart() но сталкиваются с той же проблемой. Может кто-нибудь мне помочь?