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...

Answer 1

I work with asp mvc, not core.

public IFormFile ThumbnailImage {get; set; } change to :

public HttpPostedFileBase ThumbnailImage {get; set; } 

in your view change form to this code:

@using (Html.BeginForm("Update", "Home", FormMethod.Post, new { enctype = "multipart/form-data", onsubmit = "return SubmitForm(this)" }))
{
   
    <div class="form-group">
        <input name="ThumbnailImage" type="file" />
    </div>

    <div class="form-group">
        <input type="submit" value="Submit" class="btn btn-primary" />
    </div>
}

and script change to this code:

function SubmitForm(form) {
      var formData = new FormData($(form)[0]);
        $.ajax({
          url: form.action,
          type: form.method,
          data: formData,
          processData: false,
          contentType: false,

          success: function (response) {
             alert(response);
          }
     });
     return false;
}

and in controller change your action to this:

[HttpPost]
public async Task<JsonResult> Update(ProductUpdateRequest model)
{
    //update db
    return Json("success");
}