Problem: Ajax is not passing my File object: As i try to develop a profile image form, i got stuck by this issue, by using console.log, i am able to see the File object, even on the "onChange" action of jquery but when formdata is passed via Jquery Post action, in the Php side i am able to see only the action and test data. does anyone know why ? Context, i am using Wordpress
HTML
<form id="image_prodifle_changer" action="" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="previews" class="d-none avatar_update">
</form>
Jquery
$('.avatar-change a').click(function (){
$('.avatar_update').trigger('click');
});
$('.avatar_update').change(function (e){
var form = $('#image_prodifle_changer')[0];
var formData = new FormData(form);
var $image = $('input[type=file]')[0].files[0];
formData.append('action', 'updateavatar');
formData.append('test', 'something');
formData.append('file', $image);
$.ajax(
{
type: 'POST',
url:'/wp-admin/admin-ajax.php',
//dataType:'JSON',
data : formData,
contentType: false,
processData: false,
success:function (formData){
console.log(formData);
}
}
)
});
Your Ajax Request should be like this
$.ajax({
type: "POST",
url: "/wp-admin/admin-ajax.php",
data: data,
dataType: "JSON",
contentType: false, //Required
cache: false, //Required
processData: false, //Required
beforeSend: function () {
//Your functions before send AJAX Request
},
success: function (feedback) {
//Your functions after AJAX Request Success
},
error: function (error) {
console.log(error);
},
});
And You can get all the form data using
var data = new FormData(document.getElementById("yourFromId")); //get element by form id