Sending files with ajax not working as expected

Question

I have a form which gets files along with other inputs , I want to pass those data to my ajax function. But when i check for those files in server , the server doesn't receive the file. I am new to ajax and Jquery. Here is what i have done.

<form id = "comp_inter_form">
<input type="radio"  name="inter_fit" id="inter_good_fit" value = "good" >
<input type="radio" name="inter_fit" id="inter_bad_fit" 
<input id="report_upload" type="file"/>
<input id="skype_upload" type="file"/> 
<input id="audio_upload" type="file"/> 
<input type = "submit" class = "update_interview_btn btn btn-primary" value = "Update"/>                 
</form>  

Ajax function

function completeInterview(id,profile_id){
    console.log("Candidate ID is : "+id+"\n Profile id is :"+profile_id );
    $('#completeIntModal').modal('show');
    var candidate_id = id;
    var profile_id = profile_id;
    var inter_fit,report_file,skype_file,audio_file;


    $("#comp_inter_form").on('submit',function(){
        var inter_fit = $("input[name=inter_fit]:checked").val();
        var report_file = $("#report_upload").prop('files');
        var skype_file = $("#skype_upload").prop('files');
        var audio_file = $("#audio_upload").prop('files');
        var dataString = 'inter_fit='  +inter_fit+ '&report_file='  +report_file+ '&skype_file='  +skype_file+ '&audio_file='  +audio_file+ '&candidate_id=' +candidate_id+ '&profile_id=' +profile_id;


        $.ajax({

            type: "POST",
            url: "/complete_interview",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: dataString,
            cache: false,
            success: function(data) {
                alert(data.msg);
            },
            error : function(xhr ,status ,error)
            {
                console.log(xhr);
                alert(xhr);
            }
        });
    });

Answer 1

Please try to make it like following and check if it works, As you are trying to post content VIA ajax with file input, it has to be treated separately. You have to use FormData for this.

 $("#comp_inter_form").on('submit',function(){
        var inter_fit = $("input[name=inter_fit]:checked").val();
        var report_file = $("#report_upload").prop('files');
        var skype_file = $("#skype_upload").prop('files');
        var audio_file = $("#audio_upload").prop('files');
        var dataString = 'inter_fit='  +inter_fit+ '&report_file='  +report_file+ '&skype_file='  +skype_file+ '&audio_file='  +audio_file+ '&candidate_id=' +candidate_id+ '&profile_id=' +profile_id;

        var formData = new FormData();
        formData.append("inter_fit",inter_fit);
        formData.append("candidate_id",candidate_id);
        formData.append("profile_id",profile_id);
        var fileInput = $("#report_upload").get(0);
        formData.append("report_file",fileInput.files[0]);              

        fileInput = $("#skype_upload").get(0);
        formData.append("skype_file",fileInput.files[0]);              

        fileInput = $("#audio_upload").get(0);
        formData.append("audio_file",fileInput.files[0]);              


        $.ajax({

            type: "POST",
            url: "/complete_interview",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: formData,
            contentType: false, // Not to set any content header
            processData: false, // Not to process data
            cache: false,
            success: function(data) {
                alert(data.msg);
            },
            error : function(xhr ,status ,error)
            {
                console.log(xhr);
                alert(xhr);
            }
        });

On the server side you need to check for posted file array and process those accordingly.