How to upload Iform File in iframe was binding null javascript jquery

Question

In asp.net core , i define ProductUpdateRequest has  public IFormFile ThumbnailImage { get; set; } . I create update form in iframe. when I submit form with

jQuery(function ($) {
    $("#btnsubmit").click(function (e) {
        
        //Serialize the form datas.   
        var valdata = $("#updateProductForm").serialize();
        
        //to get alert popup   
        $.ajax({
            url: "/Products/Update",
            data: valdata,
            dataType: "json",
            type: "POST",
            success: function (response) {
                alert(1);
            }
        });
    });   
    
});

asp.net have bind data from the form to request model :

[HttpPost]
        public async Task<IActionResult> Update([FromForm] ProductUpdateRequest request)

but request.ThumbnailImage is null. How can I post img (Iform File) to the server by ajax from iframe? When update action is done, what would I do if I want to get a response to

success: function (response) {
                alert(1);
            }

and told to parent page to reload to update new data? Help me, I can't understand this problem...