jquery - ajax経由で投稿するときにIFormFileプロパティがnull値を取得する（すでにenctype = "multipart / form-data"を使用）

Question

私は ajax 経由でフォームを送信していますが、「fileUpload」プロパティは常に null 値を取得しています。フォームタグに enctype="multipart/form-data" を含めようとしましたが、それでも同じです。同じトピックの他の質問で回答された別の回答も試しましたが、何も機能しません。

HTML コード

<form method="post" class="form-horizontal offset-md-2 " role="form" id="grnUploadForm" enctype="multipart/form-data">
    <input type="hidden" asp-for="GrnVehicleUploadModel.GrnVehicleUploadProcessType" id="grnVehicleUploadProcessType" />
    <div class="row">
        <div class="col-md-3">
            <div class="form-group">
                <label asp-for="GrnVehicleUploadModel.UploadDate" for="uploadDate">Upload Date<span class="text-danger">*</span></label>
                <input type="date" asp-for="GrnVehicleUploadModel.UploadDate" class="form-control  form-control-sm shadow" id="uploadDate" required />
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group">
                <label asp-for="GrnVehicleUploadModel.DealerRid" for="dealerRid">Dealer <span class="text-danger">*</span></label>
                <select asp-for="GrnVehicleUploadModel.DealerRid" asp-items="@(new SelectList(Model.Dealers,"DealerRid","DealerName"))" class="selectpicker form-control  form-control-sm  shadow" data-live-search="true" data-size="5" id="dealerRid"></select>
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group">
                <label asp-for="GrnVehicleUploadModel.BaseLocationRid" for="baseLocationRid">Location <span class="text-danger">*</span></label>
                <select asp-for="GrnVehicleUploadModel.BaseLocationRid" asp-items="@(new SelectList(Model.Locations,"LocationRid","LocationName"))" class="selectpicker form-control  form-control-sm  shadow" data-live-search="true" data-size="5" id="baseLocationRid"></select>
            </div>
        </div>


    </div>
        <div class="row " id="grn2Process">
            <div class="col-md-3">
                <div class="form-group">
                    <label asp-for="GrnVehicleUploadModel.InvoiceNumber" for="invoiceNumber">Invoice Number <span class="text-danger">*</span></label>
                    <input asp-for="GrnVehicleUploadModel.InvoiceNumber" class="form-control  form-control-sm shadow" id="invoiceNumber" required />
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label asp-for="GrnVehicleUploadModel.InvoiceDate" for="invoiceDate">Invoice Date <span class="text-danger">*</span></label>
                    <input type="date" asp-for="GrnVehicleUploadModel.InvoiceDate" class="form-control  form-control-sm shadow" id="invoiceDate" required />
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label asp-for="GrnVehicleUploadModel.ReceiptDate" for="receiptDate">Receipt Date <span class="text-danger">*</span></label>
                    <input type="date" asp-for="GrnVehicleUploadModel.ReceiptDate" class="form-control  form-control-sm shadow" id="receiptDate" required />
                </div>
            </div>
        </div>
    <div class="row">
        <div class='col-md-9'>
            <label for='fileUpload'>Choose Document</label>
            <label class='custom-file-label mt-4 text-muted text-wrap'>Document Name</label>
            <input asp-for="fileUpload" type='file' class='custom-file-input' onchange="fnlabelFileName();" id='fileUpload' required/>

        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-md-10 text-center">
            <div class="form-group">
                <button class="btn btn-sm btn-outline-success shadow" type="submit">Save</button>
                <button onclick="window.history.back()" class="btn btn-sm btn-outline-dark shadow">Cancel</button>
            </div>
        </div>
    </div>
</form>

JS

<script>

    var formId = $('#grnUploadForm');
    $(formId).on('submit', function (e) {
        $.ajax({
            url: 'FileUploadProcess',
            type: 'POST',
            data: $(formId).serializeArray(),
            success: function (response) {
                if (response.success) {
                    enablepopupModal('Successful', 'Success');
                }
                else {
                    enablepopupModal('Invalid Input', 'Warning');

                }
            },
            error: function (response) {
                enablepopupModal("Ajax Error", "Server not responding", settings = { type: 'error', modalId: 'ajaxError' });
            },
        });
        e.preventDefault();
    });



    function fnlabelFileName() {
        var fileName = $(".custom-file-input").val().split("\\").pop();
        $(".custom-file-input").siblings(".custom-file-label").addClass("selected").html(fileName);

    }
</script>

ActionMethod (コントローラー): [ここで null 値 viewModel.fileUpload = null を取得しています]

public JsonResult FileUploadProcess(GrnVehicleUploadViewModel viewModel)
        {
            //viewModel.fileUpload getting null
            var model = viewModel.GrnVehicleUploadModel;
            var errors = Validate(model);
            if (string.IsNullOrEmpty(errors))
                _jsonResponse.IsSuccess = true;
            else
                _jsonResponse.IsSuccess = false;

            return Json(new
            {
                success = _jsonResponse.IsSuccess
            });
        }

ビューモデル

 public class GrnVehicleUploadViewModel
    {
        public GrnVehicleUploadViewModel()
        {
            Dealers = new List<DealerModel>();
            Locations = new List<LocationModel>();
            GrnVehicleUploadModel = new GrnVehicleUploadModel();
        }

        public IList<DealerModel> Dealers { get; set; }
        public IList<LocationModel> Locations { get; set; }
        public GrnVehicleUploadModel GrnVehicleUploadModel { get; set; }
        public IFormFile fileUpload { get; set; }

    }