Почему не передается в контроллер имя выбранного файла для загрузки на сервер?

Question

[Tat62]

Задача: вывести в модальном окне выбранную картинку, сверху наложить Cropper, затем по кнопке сохранить передать выбранный файл и результат обрезки в контроллер. Проблема с передачей данных на сервер.
Вот отрывок из представления:

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

Это отрывок из js скрипта:

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);

Это отрывок из контроллера:

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

В контроллер попадаю, но FileName = null. Ребята подскажите, пожалуйста, что я делаю не так.