Why is the name of the selected file not passed to the controller to be uploaded to the server?

Question

ASP.NET

Task: display the selected image in the modal window, overlay Cropper on top, then use the save button to transfer the selected file and the result of cropping to the controller. Problem with transferring data to the server.
Here is an excerpt from the presentation:

<a href="#" data-btn="change-image">Изменить фото</a>
        <input type="file" class="hidden" id="change-image-input" accept="image/*">

This is an excerpt from the js script:

var cropData = cropper.getData(true);
                    var files = $('#change-image-input')[0].files;
 
                    var formData = new FormData();
                    formData.append("file", files[0]);
                    formData.append("file", cropData);
                    var MyAppUrlSettings = {
                        MyUsefulUrl: '@Url.Action("CardCreate","Home")'
                    }
                    var request = new XMLHttpRequest();
                    request.open('POST', MyAppUrlSettings.MyUsefulUrl);
                    request.send(formData);

This is an excerpt from the controller:

public ActionResult CardCreate()  
        {
            return View();
        }
        [HttpPost]
        public ActionResult CardCreate(string FileName, HttpPostedFileBase CropFile)
        {
            return View();
        }

I get to the controller, but FileName = null. Guys tell me, please, what am I doing wrong.