How to retrieve a file with an ajax request?

I would like to send a file via an ajax request, however I also have multiple selects/inputs used in my form, so I used form.serialize();

My ajax request is below:

('#form').on('submit', function (e) {
    var formData = $('#form').serialize();
    e.preventDefault();
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type: 'POST',
        url: $("#form").attr("action"),
        dataType: 'json',
        async: false,
        data: {inputs: formData, nextTab: relatedTabID, currentTab: tabID},
        success: function (data) {//do stuff

Now because of form.serialize(), it does not even detect that I have uploaded a file, I'm guessing. Is there anyway around this so it does not interfere with the other functionality of form.serialize.

My html is:

<form class="form-horizontal" method="POST" action="/roa/" id="form" enctype="multipart/form-data" files=true>
   <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
   <input type="file" name='cv'>
//all my other inputs, including many text/select statements which maybe cloned
</form>

Could anyone provide any guidance?

via Chebli Mohamed