Send files and inputs with the same Ajax request

I have a code that works perfectly for sending files without refresh using PHP and jQuery and I have another code that works without refresh too but for insertion of data in the DB. I can not put the two codes together.

What I want is basically to send the data and upload a file using the same form and a single request. I believe the problem is in the "data:" attribute

jQuery Code - Sends Inputs:

    $( "#create" ).on( "click", function() {
        formId   = $(this).closest( ".form" ).attr("id");
        formArray = $("#" + formId).serializeArray();
        $.ajax({
            type: 'POST', url: 'ajax.php',
            data: { type: 'create', formArray: formArray },
            success: function( msg ) {
                alert( msg );
                window.location.reload();
            },
            error: function() {
                alert('AJAX Error');
            }
        });
        event.preventDefault();
    });

jQuery Code - Uploading Files:

    var form;
    $('#fileUpload').change(function (event) {
        form = new FormData();
        form.append('fileUpload', event.target.files[0]);
    });

    $( "#teste" ).on( "click", function() {
        $.ajax({
            type: 'POST', url: 'ajax.php',
            processData: false,
            contentType: false,
            data: form,
            success: function( msg ) {
                alert( msg );
            },
            error: function() {
                alert('AJAX Error');
            }
        });
        event.preventDefault();
    });