formData sends empty array

Question

I am trying to send my form data to back-end while i have my data in formData but back-end receives empty array []

Screenshots

my sending data

back-end response

Code

$('.profileSave').on('click', function(e){
    e.preventDefault();

    var formData = new FormData();
    formData.append('name', $('input[name=name]').val());
    formData.append('status', $('#status').val());
    formData.append('gender', $('#gender').val());
    formData.append('birthDate', $('input[name=birthDate]').val());
    formData.append('birthPlace', $('input[name=birthPlace]').val());
    formData.append('university', $('input[name=university]').val());
    formData.append('major', $('input[name=major]').val());
    formData.append('citizenship', $('#citizenship').val());
    formData.append('bank_id', $('#bank_id').val());
    formData.append('religion', $('#religion').val());
    formData.append('maritalStatus', $('#maritalStatus').val());
    formData.append('idCardNumber', $('input[name=idCardNumber]').val());
    formData.append('idCard', $('input[name=idCard]')[0].files[0]);
    formData.append('address', $('input[name=address]').val());
    formData.append('city_id', $('#city_id').val());
    formData.append('mobilePhone1', $('input[name=mobilePhone1]').val());
    formData.append('mobilePhone2', $('input[name=mobilePhone2]').val());
    formData.append('phone', $('input[name=phone]').val());
    formData.append('simNumber', $('input[name=simNumber]').val());
    formData.append('sim', $('input[name=sim]')[0].files[0]);
    formData.append('workExperience', $('input[name=workExperience]').val());
    formData.append('cv', $('input[name=cv]')[0].files[0]);
    formData.append('certificate', $('input[name=certificate]')[0].files[0]);
    formData.append('kk', $('input[name=kk]')[0].files[0]);
    formData.append('bankAccountName', $('input[name=bankAccountName]').val());
    formData.append('bankAccountNumber', $('input[name=bankAccountNumber]').val());
    formData.append('npwp', $('input[name=npwp]')[0].files[0]);
    formData.append('photo', $('input[name=photo]')[0].files[0]);
    formData.append('vehicle', $('input[name=vehicle]').val());
    formData.append('vehicleYear', $('input[name=vehicleYear]').val());
    formData.append('facebook', $('input[name=facebook]').val());
    formData.append('instagram', $('input[name=instagram]').val());

    $.ajax({
        type:'PUT',
        url:'{{route('profiles.update', $user->profile->id)}}',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        dataType: 'JSON',
        enctype: 'multipart/form-data',
        success:function(data){
            alert(data.success);
        },
        error: function(data){
            var errors = data.responseJSON;
            errorsHtml = '<div style="margin-top:10px;" class="alert alert-danger alert-dismissible"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><ul>';
            $.each(errors.errors,function (k,v) {
                    errorsHtml += '<li>'+ v + '</li>';
            });
            errorsHtml += '</ul></di>';
            $( '.profileMessage' ).html( errorsHtml );
        }
    });
});

Any idea what is wrong?

Answer 1

Solved

I have changed my ajax request to post like

type:'POST',

BUT

The trick is providing real request in formData like this:

formData.append('_method', 'PUT');

then you can have your form data in back-end fully.

Hope it help others.