0

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);
                }
            }
        )
    });
Adascalitei Lucian
  • 129
  • 7
  • As it stands, it's hard to answer your question. What is the PHP function (action) and what is the `$_FILES` data passed to the PHP function. – Howard E Apr 02 '22 at 11:18
  • Try this approaches [834](https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload). I had a similar problem and it worked for me. – PsychoDev Apr 02 '22 at 11:58

1 Answers1

1

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
Hishan_98
  • 194
  • 1
  • 2
  • 12