How to set input type="file" from model in razor

Question

I have a multi step form that has multiple input with type of file. in some step I call submit button and again I get back to same page without uploading any files because I dont want to upload these files in this step. for example user enters all information and select files that he wants and after that I go to controller and get back to page to show him confirmation page. how can I fill input files with model properties? and again he submit the page that file property shouldnt be empty.

<input asp-for="CertImageFile" type="file" accept=".jpg, .jpeg, .png">

Model

public IFormFile CertImageFile { get; set; }

Answer 1

You can try to use ajax and partial view:

MyModelClass:

public class MyModelClass
    {
        public IFormFile CertImageFile { get; set; }
    }

View:

@model MyModelClass
<div class="row">
    <div class="col-md-6">
        <div>
            <input asp-for="CertImageFile" type="file" accept=".jpg, .jpeg, .png">
        </div>
        <button onclick="Confirm()">confirm</button>
    </div>
    <div id="modal"></div>
</div>
@section scripts{
    <script type="text/javascript">
        function Confirm() {
            $.ajax({
                url: "TestPartial",
                type: "POST",
               
                success: function (data) {
                    //put partial view to div
                    $("#modal").html(data);
                    $("#cartModal").modal('show');
                }
            });
        }
        function Submit() {
            var pdata = new FormData();
            var files = $("#CertImageFile").get(0).files;
            pdata.append('CertImageFile', files[0]);
            $.ajax({
                url: "Submit",
                type: "POST",
                data: pdata,
                processData: false,
                contentType: false,
                success: function (data) {
                 //you can do something or redirect to other page after post the data

                }
            });
            
        }
    </script>
}

Controller:

    [HttpPost]
            public IActionResult Save(MyModelClass myModelClass)
            {
                return Ok();
            }

_Partial:

<div class="modal fade cart-modal" id="cartModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    Tip:
                </div>
                <div class="modal-body">
                   Do you want to submit the file?

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="Submit()">submit</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    
                </div>
            </div>
        </div>
    </div>

Controller:

[HttpPost]
        //pass IFormFile to action
        public IActionResult Submit(MyModelClass myModelClass)
        {
            return Ok();
        }
        //view call action to pass partial view
        public IActionResult TestPartial() {
            return PartialView("_Partial");
        }

result: